Not able to Display API Data in react js-CodePudding

Guys I'm attempting to develop a modest film-based project. I have used TMDB Movies to obtain movies. I don't sure where I went wrong because the data in my console is displaying OK, but when I try to map and display that element, I receive an error saying "Movies.map is not a function." Please try to correct my mistake.

Thanks a lot!

enter image description here

import "./App.css";
import MemsData from "./Components/MemsData";
import NewMemsData from "./Components/NewMemsData";
import FilterElement from "./Components/FilterElement";
import MovieBox from "./Components/MovieBox";
import { useEffect, useState } from "react";
import Axios from "axios";

function App() {
  const API_URL =
    "https://api.themoviedb.org/3/movie/popular?api_key=8f11538792fbc26efa63aa919f0844b8";

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

  useEffect(() => {
    Axios.get(API_URL).then((res) => {
      console.log(res);
      setMovie(res.data);
    });
  });

  return (
    <div className="App">
      <h2>Movie Api</h2>
      {
        movie.map((moviereq, index) => {
          return <div key={index}>{moviereq.title}</div>;
        })}
    </div>
  );
}

export default App;

CodePudding user response：

You need to go one deeper and access results: setMovie(res.data.results);

Codesandbox link: https://codesandbox.io/s/frosty-voice-hc912d?file=/src/App.js:392-400

CodePudding user response：

The mapping method tries to modify the movie element. Movie also needs to be something you can iterate over. Perhaps if you were trying to simply display the titles try a forEach loop:


movie.forEach((m) => {
          return <div key={}>{m.title}</div>;
        })}