[React API Call Template with Fetch] Boilerplate code for implementing generic API call with fetch in react projects #react #api #fetch

apiCall.js

// This file usually is under API or Services folder.
export default async function apiCall(
  url, { 
    method = "GET",
     body, 
     headers = {} 
    }) {
  try {
    const response = await fetch(url, {
      method,
      body,
      headers,
    });
    return await response.json();
  } catch (error) {
    Promise.reject(error);
  }
}

myComponent.jsx

import { useState } from 'react'
import apiCall from '../../apiCall'

const myComponent = () => {

    const [apiData, setApiData] = useState([])

    const getData = async () => {
        try {
            const URI = 'https://api.github.com/users/warderer' //Change the URL
            const response = await apiCall(URI, { method: 'GET' }) // By default method is get
            setApiData(response)
        }
        catch (error) {
            setApiData([])
        }
    }

    return (
        <>
        {apiData?.map((item, index) => (
            <div key={index}>
                <p>{item.name}</p>
            </div>

        ))}
        </>
    )
}

export default myComponent