API fetch in React

Question

the screenshots attached are the result of an API fetch (movie database). From this results, as shown in the screenshots i am trying to reach for the "primaryImage.url" yet I keep on getting "Cannot read properties of undefined (reading 'url').

Here is my page:

const SearchPage = () => {
  const params = useParams();
  const { query } = params;

  const [data, setData] = useState(null);

  const fetchData = () => {
    fetch(`${rapidApiUrl}/search/title/${query}${rapidSearchData}`, rapidApiOptions)
      .then((response) => response.json())
      .then((data) => {
        setData(data.results);
      })
      .catch((err) => console.error(err));
  };

  useEffect(() => {
    fetchData();
  }, [query]);

  console.log(data)

  return (
    <div>
      {data &&
        data.map((media) => (
          <div key={media.id}>
            {/* <img src={media.primaryImage.url} alt={media.titleText.text} /> */}
            <p>{media.titleText.text}</p>
            <p>{media.releaseYear.year}</p>
          </div>
        ))}
    </div>
  );
};

export default SearchPage;

Clearly on your screenshot - some primaryImages are null. So primaryImage.url for them will throw an exception. Probalby primaryImage?.url will help you. — Sergey Sosunov
– Sergey Sosunov, Commented Aug 16, 2022 at 19:52
Some of the results may not have a url inside the primaryImage object. add optional chaining to account for this: media?.primaryImage?.url — Rob Terrell
– Rob Terrell, Commented Aug 16, 2022 at 19:52
I recomended use the "?" for example "media?.primaryImage?.url — Melendez
– Melendez, Commented Aug 16, 2022 at 19:56
Because the useEffect first print and after excute the function inside. — Melendez
– Melendez, Commented Aug 16, 2022 at 19:56

Mark Reed · Accepted Answer · 2022-08-16 19:54:53Z

2

As you are looping through the data, some of the primaryImage values are objects, which do indeed have a url property, but some of them are null. When attempting to find the url property of null, it errors out. You probably want to check to see if primaryImage is null and handle it differently than if it has a value.

answered Aug 16, 2022 at 19:54

Mark Reed

885 bronze badges

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

1 Comment

Refael Over a year ago

Sergey Sosunov, Mark Reed ... you solved it! Thank you so much!!

Hritik Sharma · Accepted Answer · 2022-08-16 19:57:14Z

0

The problem is primaryImage property appears to be null for few cases. You should use optional chaining to avoid the errors.

return (
    <div>
      {data &&
        data.map((media) => (
          <div key={media.id}>
            <img src={media.primaryImage?.url} alt={media.titleText?.text} /> */}
            <p>{media.titleText.text}</p>
            <p>{media.releaseYear.year}</p>
          </div>
        ))}
    </div>
  );

You can read more about optional chaining here

answered Aug 16, 2022 at 19:57

Hritik Sharma

2,0361 gold badge11 silver badges27 bronze badges

Collectives™ on Stack Overflow

API fetch in React

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related