title: Render nested JSON items in React
body: <p>I'm new to React and I'm following a tutotial to learn how to fetch data from a public API.</p>
  
  <p>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".</p>
  
  <p>Here's the request outcome in JSON:</p>
  
  <p><a href="https://i.stack.imgur.com/XxSyN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XxSyN.png" alt="enter image description here"></a></p>
  
  <p>Here's my React code:</p>
  
  <pre><code>import React, { useEffect, useState } from "react";
  import "./App.css";
  
  function App() {
  
    const [movie, getMovie] = useState([]);
  
    useEffect(() =&gt; {
      const getData = async () =&gt; {
        const response = await fetch("https://www.omdbapi.com/?apikey=XXXXXXXX&amp;t=Parasite");
        const json = await response.json();
        getMovie(json);
      };
  
      getData();
  
    }, []);
  
    return (
      &lt;div className="App"&gt;
        &lt;ul&gt;
          &lt;li&gt;{movie.Title}&lt;/li&gt;
          {movie.Ratings.map(Score =&gt; (
            &lt;li&gt;{Score.Source}&lt;/li&gt;
          ))}
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  
  }
  
  export default App
  </code></pre>