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?
fetch

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.
Image description

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:


Author

Sarthak Dwivedi

An Autodidact Software Developer, Lover of Peace and Technology! Loves to build cutting edge software and hardware solutions, when not building anything cool I'm probably looking to build something cool.