React Data Fetching: Axios

Hello there, today we'll go over how to get data in React in the simplest way possible utilizing React Hooks (useState and useEffect), the axios library, and a mock API (JSON Placeholder

Let's fetch some data, shall we?

Make a directory and create a react app with this command
npx create-react-app .

Install the axios package: npm install axios

---

Create a new component and call it whatever you like. I'll call it 'Fetching' for the purposes of this lesson.

import React from "react";

const Fetching = () => {
  return (
    <div>
      <h1>Fetching my Data</h1>
    </div>
  );
};

export default Fetching;

Now we need to construct the method that will retrieve our data from the API.

import axios from "axios";
import React, { useEffect, useState } from "react";

function Fetching() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    axios
      .get(`https://jsonplaceholder.typicode.com/posts`)
      .then((res) => {
        console.log(res);
        setPosts(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);
  return (
    <div className="output">
      <h1>Data Fetching </h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <p>Post id: {post.id}</p>
            {post.title}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Fetching;

---

Import Fetching into your app

import "./App.css";
import Fetching from "./Fetching";

function App() {
  return (
    <div className="App">
      <Fetching />
    </div>
  );
}

export default App;

---

Source Code link: Click

Conclusion

I hope you found this article useful. Read more about React Js here:

• react-search-filter
• React Conditional Rendering

Comments

[Phil Suggars]

Nice clear and concise article - great work. My only question (as others have picked up) is why you'd use Axios over the built in fetch? I've used both (not extensively) but in my limited experience there's little to chose between them. What's your thinking here?

[Abayomi Ogunnusi]

I just feel it is an overall preference of one over the other.... i will use any one that does the job perfectly. Thanks for your question

[Jon Randy 🎖️]

Wouldn't a simpler way be to just use the built-in fetch instead of importing axios?

[Drew Ronsman]

I was thinking the same thing but I my application I used fetch but it wouldn't work, but using axios it worked

The thing it was calling was a email verification API on heroku

[James Thomson]

Honest question, what's so wrong with using Axios that you'd opt to use Redaxios - a lib that hasn't had any releases for a year? To me that's a red flag.

Also, React-Query is amazing, but doesn't have anything built in for handling XHR so you'd still need Fetch or something like Axios.

[Abayomi Ogunnusi]

@lukeshiru thanks for your massive contribution.... All points noted

[Abayomi Ogunnusi]

@jonrandy you are correct. I decided on axios over fetch for backward compatibility reasons. Fetch can equally do the trick too. Thanks for your contribution