An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
How to Code an API Call with React!
Hey fellow creators
Let's code an API Call with React.
This is pretty common and you need to master it if you want to use React.
If you prefer to watch the video version, it's right here :
1. The hooks you need!
You need to import two hooks:
import {useState, useEffect} from "react";function App(){ return( <div className="app"> <h1>React API Call</h1> </div> )}export default App;
Now create your state which will start at false since at first you don't have any data:
import {useState, useEffect} from "react";function App(){ const [imgURL, setImgURL] = useState(false); return( <div className="app"> <h1>React API Call</h1> </div> )}export default App;
2. Fetch an API
Find a random image API and do a fetch when the component is mounted, using the hook useEffect().
Let's start by simply logging the response of the fetch to check if it's working:
useEffect(() => { fetch('https://source.unsplash.com/random/600x800') .then(res => console.log(res))}, [])
It will be triggered after the first render of the component!
Since the response is not JSON, you don't need to parse it, you can just extract the URL from it.
useEffect(() => { fetch('https://source.unsplash.com/random/600x800') .then(res => setImgURL(res.url))}, [])
Now you can add the image to your JSX:
return( <div className="app"> <h1>React API Call</h1> {imgURL && <img src={imgURL} />} </div> )
You're using the short circuit operator, meaning that it'll only render the image if imgUrl is true.
If you refresh the page, you'll see that you have a different image each time!
This is how you can do a pretty basic API call with React!
Come and take a look at my Youtube channel: https://www.youtube.com/c/Learntocreate/videos
See you soon!
Enzo.
Original Link: https://dev.to/ziratsu/how-to-code-an-api-call-with-react-59kf
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To