Fetch and function error on AJAX and APIs call on reactjs

Question

I'm getting an error of items.map is not a function when fetching the file that is hosted from unsplash.

I'm not sure if the problem is from the .map or from fetching the file from source.

Below is my code and also here is the complete sandbox code https://codesandbox.io/.

import { React, useState, useEffect } from "react";

function MyComponent() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);
  useEffect(() => {
    fetch(
      "https://api.unsplash.com/search/photos?query=nature?orientation=landscape&client_id=ddIh7_ebg4KwNHzNLf3ePCZb6yIPREJ5jxG3dYgoj6U"
    )
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      );
  }, []);

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <ul>
        {items.map((item) =>
          <li key={item.results.id}>
            {item.results.description}
          </li>
        )}
      </ul>
    );
  }
}

export default MyComponent;

Answer 1

It seems the response JSON is an object and not an array. When you update the items state with an object it's no longer mappable.

// 20220209004834
// https://api.unsplash.com/search/photos?query=nature?orientation=landscape&client_id=ddIh7_ebg4KwNHzNLf3ePCZb6yIPREJ5jxG3dYgoj6U#f3f3f3

{
  "total": 10000,
  "total_pages": 1000,
  "results": [
    {
      "id": "_LuLiJc1cdo",
      "created_at": "2016-06-06T01:08:36-04:00",
      "updated_at": "2022-02-08T13:00:46-05:00",
      "promoted_at": "2016-06-06T01:08:36-04:00",
      ...
      "description": "follow @kalenemsley on ig",
      ...
    },
    ...
  ],
  ...
}

You probably want the results array property for your state.

useEffect(() => {
  fetch("....")
    .then((res) => res.json())
    .then(
      (result) => {
        setIsLoaded(true);
        setItems(result.results);
      },
      (error) => {
        setIsLoaded(true);
        setError(error);
      }
    );
}, []);

Then when mapping each item you access the properties correctly

<ul>
  {items.map((item) =>
    <li key={item.id}>
      {item.description}
    </li>
  )}
</ul>