reactjs - fetch data using react useffect and then make a next fetch according to previous fetched data

Question

im getting data from api as an object and then use some inforation from the response data to make the next fetch to get the new data response here is the code first fecth get movie object that contain the movie post url then pass the movie url to backgroundImage in header html tag inorder to get the movie poster the problem that url of background image is passed as null so i got nothing

import React, { useEffect, useState } from 'react'
import axios from '../axios'
import requests from '../requests'
import {posterpath} from '../requests.js'
import '../styles/banner.css'
import {Image} from 'antd'

function Banner() {

const [movie, setMovie] = useState([])


useEffect(() => {
   async function fetchData(){
        const request = await axios.get(requests.fetchNetflixOriginals)
        setMovie(
            request.data.results[
                Math.floor(Math.random() * request.data.results.length -1)
            ]
        )
       
   }
   fetchData();
   console.log(movie)
}, [])

return (
    
    <header className="banner"
        style={{
            backgroundImage : `url 
("https://image.tmdb.org/t/p/w500${(movie)=>movie?.backdrop_path}")`
        }}
    >

        <div className="banner-contents">
            <h1>{movie.original_title}</h1>
        </div>
    </header>
)


export default Banner

question from:https://stackoverflow.com/questions/65845479/fetch-data-using-react-useffect-and-then-make-a-next-fetch-according-to-previous

Answer 1

I think you should change:

${(movie)=>movie?.backdrop_path}

to

${movie.backdrop_path}