.map is not a function. map through an array of objects. (React Hooks)

Question

I'm building a simple app that searches for movies from a movie DB. The search input successfully fetchs and sets the apiData to movies with the same value.

I'm struggling to map and display the title of the movies and get the error apiData.map is not a function

Data is state data is an array of objects.

I want to access the title from the objects i.e {title: 'mad max'} and display this.

Here's the code

const SearchPage = () => {
  const [apiData, setApiData] = useState({ results: {} });
  const [searched, setSearched] = useState([]);
  const [loading, setLoading] = useState(false);

  const handleSearch = (event) => {
    setSearched(event.target.value);
  };

  useEffect(() => {
    setLoading(true);
    fetchSearched(searched).then((data) => setApiData(data.results));
    setLoading(false);
  }, [searched]);

  return (
    <>
      <form className='search-form'>
        <input
          type='text'
          placeholder='search for a film'
          onChange={(event) => handleSearch(event)}
        />
      </form>
       // code below causes error when un-commented
      {/* <SearchList apiData={apiData} /> */}
    </>
  );
};

const SearchList = ({ apiData }) => {
  return (
    <div className='search-list'>
      SEARCH LIST
      <ul>
        {apiData.map((movie) => {
          return <SearchItem movie={movie} key={movie.id} />;
        })}
      </ul>
    </div>

const SearchItem = ({ movie }) => {
  return (
    <div className='search-item'>
      <li>{movie.title}</li>
    </div>

Mapping data from an API keeps tripping me up so any clarification would be appreciated.

Do you get an error at all? can you also console.log your apiData for us? — alaboudi
– alaboudi, Commented Mar 4, 2020 at 2:32
Do you mean to initialize apiData to { results: [] }? Also, when you pass in apiData to SearchList, do you mean to pass apiData.results? Ensure that you are consistent with what you are setting apiData to. Is it an object, where result is an array? — kennyvh
– kennyvh, Commented Mar 4, 2020 at 2:34

san · Accepted Answer · 2020-03-04 02:39:12Z

1

Because you set initial data of apiData is object. Please refer my code:

const SearchPage = () => {
  const [apiData, setApiData] = useState([]); // change to array
  const [searched, setSearched] = useState(""); // i think it is string
  const [loading, setLoading] = useState(false);

  const handleSearch = (event) => {
    setSearched(event.target.value);
  };

  useEffect(() => {
    if(!searched) return
    setLoading(true);
    fetchSearched(searched).then((data) => {
       setApiData(data.results)
       setLoading(false);
    });

  }, [searched]);

  return (
    <>
      <form className='search-form'>
        <input
          disabled={loading}
          type='text'
          placeholder='search for a film'
          onChange={(event) => handleSearch(event)}
        />
      </form>
       // code below causes error when un-commented
       <SearchList apiData={apiData} />
    </>
  );
};

const SearchList = ({ apiData = [] }) => {
  return (
    <div className='search-list'>
      SEARCH LIST
      <ul>
        {apiData.map((movie) => {
          return <SearchItem movie={movie} key={movie.id} />;
        })}
      </ul>
    </div>

answered Mar 4, 2020 at 2:39

san

1,7031 gold badge13 silver badges20 bronze badges

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

2 Comments

DGB Over a year ago

That works however could you explain this line. const SearchList = ({ apiData = [] }) I have never seen the de structured data be set to an empty array before. Thanks!

san Over a year ago

to set default value for apiData (default value is empty array [] ). You can use SearchList.defaultProps = { apiData = []}

alaboudi · Accepted Answer · 2020-03-04 02:38:01Z

0

your first line const [apiData, setApiData] = useState({ results: {} }); is setting an object to the state. Meanwhile, your api response is setting the an array to the state. I think you get an error due to how you are reading the initial state, and not due to the api call.

I think if you simply change this to const [apiData, setApiData] = useState([]); it will work. Happy coding

answered Mar 4, 2020 at 2:38

alaboudi

3,4514 gold badges35 silver badges50 bronze badges

Collectives™ on Stack Overflow

.map is not a function. map through an array of objects. (React Hooks)

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related