Render nested JSON items in React

Question

I'm new to React and I'm following a tutotial to learn how to fetch data from a public API.

I can render the "parent" items like the Title in this case, however I can't find a way to render the (nested) child items like Ratings. This is the error I'm getting "TypeError: movie.Ratings is undefined".

Here's the request outcome in JSON:

Here's my React code:

import React, { useEffect, useState } from "react";
import "./App.css";

function App() {

  const [movie, getMovie] = useState([]);

  useEffect(() => {
    const getData = async () => {
      const response = await fetch("https://www.omdbapi.com/?apikey=XXXXXXXX&t=Parasite");
      const json = await response.json();
      getMovie(json);
    };

    getData();

  }, []);

  return (
    <div className="App">
      <ul>
        <li>{movie.Title}</li>
        {movie.Ratings.map(Score => (
          <li>{Score.Source}</li>
        ))}
      </ul>
    </div>
  );

}

export default App

I'm sorry, I forgot to include the error. This is the error I'm getting "TypeError: movie.Ratings is undefined". I'll update the question. — Ken
– Ken, Commented Jun 5, 2020 at 12:24
you need to render the component if movie && movie.Ratings are defined — onuriltan
– onuriltan, Commented Jun 5, 2020 at 12:25

Dipesh KC · Accepted Answer · 2020-06-05 12:52:05Z

2

You can add ? (optional chaining) to only to map if there is movie

 {movie.Ratings?.map(Score => (
      <>
      <li>{Score.Source}</li>
      <li>{Score.Value}</li>
      </>
    ))}

edited Jun 5, 2020 at 12:52

answered Jun 5, 2020 at 12:35

Dipesh KC

2,4631 gold badge19 silver badges20 bronze badges

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

6 Comments

Ken Over a year ago

Thank you Dipesh. As mentioned, I'm new to React but this looks very elegant and simpler. This worked but how would you render Value as well, under each correspoding Source using this method?

Ken Over a year ago

Nevermind Dipesh, I just figured it out. I can simply use "<li>{Score.Source}: {Score.Value}</li>".

Dipesh KC Over a year ago

yeah.You can do in either way as you prefer :)

Ken Over a year ago

I think simply adding "?" (optional chaining) to only to map if there is movie as you suggested in your answer was the easiest and cleanest way to solve this problem. I'm choosing your answer. Thank you Dipesh.

Dipesh KC Over a year ago

Great to help you brother :)

|

hendrixchord · Accepted Answer · 2020-06-05 12:34:48Z

1

There are a few things I notice

const [movie, getMovie] = useState([]); You are initializing this as an array of movie it should be const [movie, getMovie] = useState({});

function App() {

  const [movie, getMovie] = useState({});

  useEffect(() => {
    const getData = async () => {
      const response = await fetch("https://www.omdbapi.com/?apikey=XXXXXXXX&t=Parasite");
      const json = await response.json();
      getMovie(json);
    };

    getData();

  }, []);

  if (!movie.Ratings || movie.Ratings.length === 0) return null;

  return (
    <div className="App">
       <ul>
         <li>{movie.Title}</li>
         {movie.Ratings.map(score => (
           <li>{score.Source}</li>
         ))}
      </ul>
    </div>
  );
}

Or the return block can be written this way too without the if

return (
    <div className="App">
       <ul>
         <li>{movie.Title}</li>
         {movie.Ratings && movie.Ratings.map(score => (
           <li>{score.Source}</li>
         ))}
      </ul>
    </div>
  );

edited Jun 5, 2020 at 12:34

answered Jun 5, 2020 at 12:28

hendrixchord

5,5045 gold badges33 silver badges44 bronze badges

3 Comments

Ken Over a year ago

Thanks for your help Hendrix. I just tried your amends and now I'm getting "TypeError: movie.map is not a function".

Ken Over a year ago

Thank you, this works. But does that means I'll have to repeat "if (!movie.Ratings || movie.Ratings.length === 0) return null;" for every nested items I want to render?

hendrixchord Over a year ago

I’ve added an alternative way too, depends how you wish to do it.

Collectives™ on Stack Overflow

Render nested JSON items in React

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related