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:
Top comments (7)
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?
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
Wouldn't a simpler way be to just use the built-in
fetchinstead of importingaxios?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
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.
@lukeshiru thanks for your massive contribution.... All points noted
@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