title: Cannot access fields of JSON objects in an array Reactjs
body: <p>I am new to Javascript and React. I am trying to work with what is, to my understanding, a JSON object I am receiving from my database, and am storing in variable <code>UPCOMING</code>.</p>
  <p>Here is the format of the JSON:</p>
  <pre><code>[
     {
        &quot;start&quot;:&quot;2022-03-30T04:00:00.000Z&quot;,
        &quot;end&quot;:&quot;2022-03-30T05:00:00.000Z&quot;,
        &quot;role&quot;:&quot;Cashier&quot;,
        &quot;staffId&quot;:&quot;staff_b520d594-068d-4b3e-a8d2-9f4d0e0fc2cc&quot;,
        &quot;title&quot;:&quot;Eudsokia Marisnette&quot;,
        &quot;event_id&quot;:&quot;schedule_16228a2b-eeb6-41cf-8f66-8d57cd1cb054&quot;
     },
     {
        &quot;start&quot;:&quot;2022-03-25T04:00:00.000Z&quot;,
        &quot;end&quot;:&quot;2022-03-25T05:00:00.000Z&quot;,
        &quot;role&quot;:&quot;Cashier&quot;,
        &quot;staffId&quot;:&quot;staff_b520d594-068d-4b3e-a8d2-9f4d0e0fc2cc&quot;,
        &quot;title&quot;:&quot;Eudsokia Marisnette&quot;,
        &quot;event_id&quot;:&quot;schedule_40e06f22-7bd6-4f0b-80b4-4c59a35f0bc2&quot;
     },
     {
        &quot;start&quot;:&quot;2022-03-29T04:00:00.000Z&quot;,
        &quot;end&quot;:&quot;2022-03-29T05:00:00.000Z&quot;,
        &quot;role&quot;:&quot;Cashier&quot;,
        &quot;staffId&quot;:&quot;staff_b520d594-068d-4b3e-a8d2-9f4d0e0fc2cc&quot;,
        &quot;title&quot;:&quot;Eudsokia Marisnette&quot;,
        &quot;event_id&quot;:&quot;schedule_46c87309-c706-41ba-ac0c-641ac987e592&quot;
     },
     {
        &quot;start&quot;:&quot;2022-03-27T04:00:00.000Z&quot;,
        &quot;end&quot;:&quot;2022-03-27T05:00:00.000Z&quot;,
        &quot;role&quot;:&quot;Cashier&quot;,
        &quot;staffId&quot;:&quot;staff_b520d594-068d-4b3e-a8d2-9f4d0e0fc2cc&quot;,
        &quot;title&quot;:&quot;Eudsokia Marisnette&quot;,
        &quot;event_id&quot;:&quot;schedule_4ab4e333-76d5-4bb0-94d5-429352d6d518&quot;
     },
     {
        &quot;start&quot;:&quot;2022-03-24T21:00:00.000Z&quot;,
        &quot;end&quot;:&quot;2022-03-24T22:00:00.000Z&quot;,
        &quot;role&quot;:&quot;Cashier&quot;,
        &quot;staffId&quot;:&quot;staff_b520d594-068d-4b3e-a8d2-9f4d0e0fc2cc&quot;,
        &quot;title&quot;:&quot;Eudsokia Marisnette&quot;,
        &quot;event_id&quot;:&quot;schedule_4b00d95c-931d-424b-a86e-7af43d3717a1&quot;
     },
     {
        &quot;start&quot;:&quot;2022-03-28T04:00:00.000Z&quot;,
        &quot;end&quot;:&quot;2022-03-28T05:00:00.000Z&quot;,
        &quot;role&quot;:&quot;Cashier&quot;,
        &quot;staffId&quot;:&quot;staff_b520d594-068d-4b3e-a8d2-9f4d0e0fc2cc&quot;,
        &quot;title&quot;:&quot;Eudsokia Marisnette&quot;,
        &quot;event_id&quot;:&quot;schedule_78a6aa4b-688c-454c-8d2e-227d67ab521a&quot;
     },
     {
        &quot;start&quot;:&quot;2022-03-26T04:00:00.000Z&quot;,
        &quot;end&quot;:&quot;2022-03-26T05:00:00.000Z&quot;,
        &quot;role&quot;:&quot;Cashier&quot;,
        &quot;staffId&quot;:&quot;staff_b520d594-068d-4b3e-a8d2-9f4d0e0fc2cc&quot;,
        &quot;title&quot;:&quot;Eudsokia Marisnette&quot;,
        &quot;event_id&quot;:&quot;schedule_f12cf70e-b96b-47ca-893d-384477c4d80b&quot;
     }
  ]
  </code></pre>
  <p>When ever I do something like <code>&lt;p&gt;{JSON.stringify(UPCOMING)}&lt;/p&gt;</code> or <code>&lt;p&gt;{JSON.stringify(UPCOMING[0])}&lt;/p&gt;</code> it will render to the screen as expected. However if I try something like <code>&lt;p&gt;{JSON.stringify(UPCOMING[0].title)}&lt;/p&gt;</code>, the entire screen in the browser goes white.</p>
  <p>Additionally, I get the following error message in the console: <code>Uncaught TypeError: Cannot read properties of undefined (reading 'title')</code>. If I am understanding the error correctly, it is essentially saying that the value is undefined, therefore it cannot show on screen?</p>
  <p>How can I get the fields of the objects within this JSON without this white screen error occurring?</p>