title: React cannot read properties of null (reading 'map')
body: <p>I am new to React and I get the <code>Objects are not valid as a React child (found: object with keys {id, description, status, priority, created, deadline, emp}). If you meant to render a collection of children, use an array instead.</code> error and followed <a href="https://stackoverflow.com/questions/52428879/objects-are-not-valid-as-a-react-child-if-you-meant-to-render-a-collection-of-c">Link</a> to solve the issue.</p>
  <p>Upon running the object with the <code>map</code> function I get the null error. Upon passing the object <code>JSON.stringify()</code> I get the string ensuring data is returned by the API.</p>
  <p>This is my data.</p>
  <pre><code>[
      {
          &quot;id&quot;: 1,
          &quot;description&quot;: &quot;asfd&quot;,
          &quot;status&quot;: &quot;ass&quot;,
          &quot;priority&quot;: &quot;p&quot;,
          &quot;created&quot;: &quot;2022-08-21&quot;,
          &quot;deadline&quot;: &quot;2022-07-28&quot;,
          &quot;emp&quot;: 1
      }
  ]
  </code></pre>
  <p>This is my code.</p>
  <pre><code>import React, { useState, useEffect } from 'react'
  
  const TaskPage = ({match}) =&gt; {
      let taskId = match.params.id
      let [task, setTask] = useState(null)
  
        useEffect(() =&gt; {
          getTask()
      }, [taskId])
  
      let getTask = async () =&gt; {
          if (taskId === 'new') return
  
          let response = await fetch(`/task/task/${taskId}/`)
          let data = await response.json()
          setTask(data)
      }
  
    return (
  
      &lt;div&gt;
  
        {task.map(task =&gt; &lt;div&gt;{task.id}&lt;/div&gt;)}
        &lt;div&gt;{JSON.stringify(task)}&lt;/div&gt;
      &lt;/div&gt;
    );
  
  }
  </code></pre>
  <p>What have I done wrong?</p>