Not able to Display API Data in react js

Question

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.

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;

The error specifically says that Movies.map is not a function, instead of movie.map? Where in the code is there a Movies.map used? — David
– David, Commented Dec 21, 2022 at 12:15
In any event... If something.map is not a function then something is not an array. So what is it? In your debugging, what is the exact value of something when the error occurs? What did you expect the value to be and why? — David
– David, Commented Dec 21, 2022 at 12:16

Tim van Dam · Accepted Answer · 2022-12-21 12:23:47Z

1

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

answered Dec 21, 2022 at 12:23

Tim van Dam

4633 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Not able to Display API Data in react js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related