title: React: Uncaught TypeError: Cannot read properties of undefined
body: <p><em><strong>THIS QUESTION IS ALREADY SOLVED. Scroll down or <a href="https://stackoverflow.com/a/73523801/19124473">click here</a> to view solutions</strong></em></p>
  <p>I am trying to use React to extract a JSON data from my server and render it with two functions. But it seems that the two render functions cannot read the values in the json correctly.
  I'm sure that my data server is working correctly.</p>
  <p>Error log:</p>
  <pre><code>Unhandled Runtime Error
  Uncaught TypeError: Cannot read properties of undefined (reading 'title')
  
  Source
  http://localhost:8080/dist/App.js [:19:68]
  TypeError: Cannot read properties of undefined (reading 'title')
      at Question (http://localhost:8080/dist/App.js:19:68)
      at renderWithHooks (http://localhost:8080/_snowpack/pkg/react-dom.v18.2.0.js:16313:18)
      at mountIndeterminateComponent (http://localhost:8080/_snowpack/pkg/react-dom.v18.2.0.js:20077:13)
      at beginWork (http://localhost:8080/_snowpack/pkg/react-dom.v18.2.0.js:21590:16)
      at beginWork$1 (http://localhost:8080/_snowpack/pkg/react-dom.v18.2.0.js:27414:14)
      at performUnitOfWork (http://localhost:8080/_snowpack/pkg/react-dom.v18.2.0.js:26548:12)
      at workLoopSync (http://localhost:8080/_snowpack/pkg/react-dom.v18.2.0.js:26454:5)
      at renderRootSync (http://localhost:8080/_snowpack/pkg/react-dom.v18.2.0.js:26422:7)
      at performSyncWorkOnRoot (http://localhost:8080/_snowpack/pkg/react-dom.v18.2.0.js:26074:20)
      at flushSyncCallbacks (http://localhost:8080/_snowpack/pkg/react-dom.v18.2.0.js:12050:22)
  </code></pre>
  <p>App component:</p>
  <pre class="lang-js prettyprint-override"><code>let prop
  
  function App() {
      const [item, setItems] = useState([])
  
      useEffect(() =&gt; {
          fetch('http://localhost:9090/')
              .then((res) =&gt; res.json())
              .then((resJson) =&gt; {
                  const data = JSON.parse(resJson)
                  setItems(data)
              })
      }, [])
      prop = item
      return (
          &lt;div&gt;
              &lt;Question/&gt;
              &lt;hr/&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>Question component:</p>
  <pre class="lang-js prettyprint-override"><code>function Question() {
      return (
          &lt;div className={&quot;question&quot;}&gt;
              &lt;h1&gt;{ prop.question.title }&lt;/h1&gt;
              &lt;p className={&quot;info&quot;}&gt;Created by user: { prop.question.create_by }&lt;/p&gt;&lt;br/&gt;
              &lt;p className={&quot;info&quot;}&gt;On { Intl.DateTimeFormat('en-US', {year: 'numeric', month: '2-digit',day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'}).format(new Date(prop.question.time)) }&lt;/p&gt;&lt;br/&gt;
              &lt;hr/&gt;
              &lt;div dangerouslySetInnerHTML={{__html: prop.question.detail}}&gt;&lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default App;
  </code></pre>
  <p>The JSON data:</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;question&quot;: {
      &quot;title&quot;: &quot;Question&quot;,
      &quot;create_by&quot;: &quot;AZ&quot;,
      &quot;time&quot;: 1661394765044,
      &quot;detail&quot;: &quot;&lt;h4&gt;info&lt;/h4&gt;&quot;
    },
    &quot;answers&quot;: [
      {
        &quot;create_by&quot;: &quot;baa&quot;,
        &quot;time&quot;: 1661394765044,
        &quot;detail&quot;: &quot;&lt;h4&gt;abc&lt;/h4&gt;&quot;
      }
    ]
  }
  </code></pre>