data fetch with loading in react

WinMaw answered on November 13, 2022 Popularity 9/10 Helpfulness 4/10

answer data fetch with loading in react

data fetch with loading in react

Comment

//helper>useFetch.jsx
import {useEffect,useState} from 'react'

const useFetch = (url) => {

    const [data,setData] = useState({
        data:null,
        isLoading:true,
        error:null
    })

    useEffect(()=>{

        setData(pre => {
            return {...pre,isLoading:true}
        })

      fetch(url).then(res => res.json()).then(data => {
        setData(pre => {
            return {...pre,data:data,isLoading:false}
        });
      }).catch(e=>{
        setData(pre => {
            return {...pre,isLoading:false,error:e}
        });
      });
    },[])
  
  return data
}

export default useFetch
=======================================================

//App.jsx
import useFetch from './helper/useFetch.jsx'
const App = () => {

  const {data,error,isLoading} = useFetch('https://fakestoreapi.com/products')

  return (
    <div>
      {
        error ? <h1>I'm error</h1> : 
        <>
        {isLoading? <h1>hey i am loading</h1>: data?.map(i => <p key={i.id}>{i.title}</p> )}
        </>
      }     
    </div>
  )
}

export default App

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: fetch javascript loading

Link to this answer
Share Copy Link

Contributed on Nov 13 2022

WinMaw

0 Answers Avg Quality 2/10

data fetch with loading in react

Contents

More Related Answers

data fetch with loading in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.