Mapping an element with API information in React

Question

I am developing a react app with a movie API (https://developers.themoviedb.org). The thing is that i am trying to put information from the API in a card. I use useState and useEffect for this. Also, I use Axios to bring it from the API. I don't know, I can't see what is not working. The error message is map is not a function but also, I believe that is something wrong in my useEffect. Please help!

const Home = () => {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    axios.get("https://api.themoviedb.org/3/trending/movie/week?api_key=**APIKEY**")
      .then(res => {
        setMovies(res.data);

      }).catch(console.log)
  },
    []
  );


  return (
    <section id="main-page">
      <div className='list-main-page'>
        <a href='#'>
          <h2>
            Películas que son tendencia
            <FontAwesomeIcon className='arrow-list' icon={faArrowRight} />
          </h2>
        </a>
        <div className='card-list-container'>

        {movies.map((movie, i) => {
            return (
              <Card key={i} image={movie.poster_path} />
            )})
          }

        </div>
      </div>
    </section>
  )
};

export default Home;

It appears that you have posted sensitive/private information. If that's the case, please reset your passwords and/or revoke API keys and tokens, as they are considered compromised when posted on the internet. — Samuel Liew, Aug 14 '20 at 02:05

Luis Paulo Pinto · Answer 1 · 2020-08-13T18:53:09.543

1

That's because the values of response are inside res.data.results. So you just need to change:

setMovies(res.data);

to:

setMovies(res.data.results);

If you are using a typescript project, would also be good to you map the properties that you want from api with an interface:

// just an examples of some properties
interface MoviesProps {
  id: number;
  video: boolean;
  vote_count: number;
  title: string;
}

and set your state as:

const [movies, setMovies] = useState<MoviesProps[]>([]);

edited Aug 13 '20 at 18:53

answered Aug 13 '20 at 18:10

Luis Paulo Pinto

5,578
4
21
35

1

Note that the interface is only possible in Typescript. Javascript does not support interfaces or types natively. – prohit Aug 13 '20 at 18:15
Hi @prohit, i will update it with the info. thanks! – Luis Paulo Pinto Aug 13 '20 at 18:16

Mohammad Fallah · Answer 2 · 2020-08-13T18:18:28.240

1

You should be used like this code:

setMovies(res.data.results);

edited Aug 13 '20 at 18:18

answered Aug 13 '20 at 18:12

Mohammad Fallah

976
11
14

score 0 · Answer 3 · answered Aug 13 '20 at 18:14

First of all you should not post your api key publicly like that.

You should make yourself comfortable with the form that is returned from the public API.

{
   "page": 1,
   "results": [...],
   "total_pages": 1000,
   "total_results": 20000
}

Here we see the result of our res.data. We can use it like a Javascript object since Axios converts this JSON for us. (You could also convert it yourself with JSON.parse() )

The actual movies you were looking for are encapsulated inside the result array in the data. In your attempt, you were trying to map (which is a function from arrays) the result object, which obviously is not an array, hence the error you are facing.

To fix this, you would have to save the result in your state

setMovies(res.data.results);

score 0 · Answer 4 · answered Aug 13 '20 at 18:23

data from the api comes as an object {"page":1, "results":[...]} so to set movie's array in your state you should access the results array as follows;


  useEffect(() => {
    axios.get("https://api.themoviedb.org/3/trending/movie/week?api_key=API_KEY")
      .then(res => {
        setMovies(res.data.results);

      }).catch(error  => 
         console.log(error)
      )
  },
    []
  );

Avoid posting your API keys

score 0 · Answer 5 · answered Aug 09 '23 at 20:18

0

The problem lies with the setMovies hook. You need to change it from setMovies(res.data); to setMovies(res.data.results as that is the hook that will receive the data from the API.

answered Aug 09 '23 at 20:18

Visal Yogaraj

15
7

Mapping an element with API information in React

5 Answers5