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/TheWebSchool

See you soon!

Enzo.