CODEWITHSUNDEEP
reactjsapi
kajó
kajó

Reputation: 15

ReactJs .map in data received by api

and thank you in advance for any help. I am trying to build a web app that fetches data from an API, in this case a movie database API, but when i am trying to map all the movies from a specific title search i get the .map is not a function error, what i am doing wrong ? Can't i use useState to display the data ? When i do console.log (search) i can see the array with all the data :

import React, {useEffect, useState} from 'react';
import axios from 'axios';


export default function RandomFacts() {
  const [input, setInput] = useState('');
  const [search, setSearch] = useState(['']);

  useEffect(() => {
    apiCall();
  }, [input]);

  const moviesList = search && search.map((movie, index) =>
    <div className="movies" key="index">
      <li><h2>{movie.Title}</h2></li>
      <li><img src={movie.Poster} alt="poster" /></li>
    </div>,
  );

  const apiCall = async () => {
    const url = 'http://www.omdbapi.com/?s='+input+'&page=1&apikey=536a34c3';

    try {
      const response = await axios.get(url);
      if (response.status === 200 && response !== undefined) {
        const data = response.data;
        setSearch(data.Search);
        console.log(search);
      }
    } catch (error) {
      console.log(error);
    }
  };


  return (
    <div className="main">
      <h1>Movies</h1>
      <div className="textInput">
        <form>
          <label>
            <input type="text" value={input}
              onChange={(e) => setInput(e.target.value)}
            />
          </label>
        </form>
      </div>
      <div className="movies">
        {moviesList}
      </div>

    </div>

  );
}

enter image description here

Upvotes: 0

Views: 136

Answers (1)

JBallin
JBallin

Reputation: 9787

The API is returning a response Object with a data key containing the keys Search, TotalResults, and Response. You're trying to map this response Object instead of the Array contained in response.data.Search.

So you should be using setSearch(response.data.Search).

Upvotes: 1

Related Questions