I’m trying to show the movie images and movie titles from Movies Database on my site to browse. I don’t have much experience with React and not sure what I’m doing wrong or what needs to be changed to get the data to show on the site.

I’m using fetch and useState. Fetch must be working correctly as it’s showing in the console.

function App() {
  const [data, setData] = useState([])

  let url = 'https://moviesdatabase.p.rapidapi.com/titles';

  function apiGet() { 

  const fetchData = fetch(url, { method: 'Get', headers: {
    'X-RapidAPI-Key': '',
    'X-RapidAPI-Host': 'moviesdatabase.p.rapidapi.com'
  }})
    .then((res) => res.json())
    .then((json) => {
      console.log(json);
      setData(json);
    });
  };

return (

<>
    My API <br/>
    <button onClick={apiGet}>Fetch API</button>
    <br />

    <div>
        {[data].map((item) => {
          return (
                <img key= "{item.id}" src={item.primaryImage} />

          )
})}
    </div>
    </>
  )
}

I’ve deleted the api key to share this.