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: