Fetching data with React hooks and Axios

serge kalaga answered on June 3, 2022 Popularity 8/10 Helpfulness 4/10

answer Fetching data with React hooks and Axios

related react hook for fetching data with axios

Fetching data with React hooks and Axios

Comment

// use-fetch-data.js
import { useEffect, useState} from 'react';
import axios from 'axios';

const useFetchData = () => {
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const { data: response } = await axios.get('/stuff/to/fetch');
        setData(response);
      } catch (error) {
        console.error(error)
      }
      setLoading(false);
    };

    fetchData();
  }, []);

  return {
    data,
    loading,
  };
};

export default useFetchData;

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: dev.to

Tags: axios javascript react-hooks

Link to this answer
Share Copy Link

Contributed on Jun 03 2022

serge kalaga

0 Answers Avg Quality 2/10

Closely Related Answers

react hook for fetching data with axios

Comment

//mycomponent.js
import React from 'react';
import useFetchData from './hooks/use-fetch-data.js'

const MyComponent = () => {
  const {
    data,
    loading,
  } = useFetchData();

  return (
    <div>
    {loading && <div>Loading</div>}
    {!loading && (
      <div>
        <h2>Doing stuff with data</h2>
        {data.map(item => (<span>{item.name}</span>))}
      </div>
    )}
    </div>
  )
}

export default MyComponent;

Popularity 7/10 Helpfulness 2/10 Language javascript

Source: dev.to

Tags: axios javascript hook a

Link to this answer
Share Copy Link

Contributed on Aug 22 2022

Harun Mohamed

0 Answers Avg Quality 2/10

Fetching data with React hooks and Axios

Contents

More Related Answers

Fetching data with React hooks and Axios

Closely Related Answers

react hook for fetching data with axios

Grepper

Documentation

Social

Legal

Contact

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