title: fetch json data to state array
body: <p>I fetch and get the data, I want to save it to state using setState as an array or object so I can call to each field in the return part and display it on screen</p>
  <p>but I get this error:</p>
  <blockquote>
  <p>Uncaught Error: Objects are not valid as a React child (found: object
  with keys {gender, name, location, email, login, dob, registered,
  phone, cell, id, picture, nat}). If you meant to render a collection
  of children, use an array instead</p>
  </blockquote>
  <pre><code>import {useState} from 'react'
  
  export default function Test(){
      const [data, setData] = useState([]);
  
      const getInfo = async () =&gt;{
          const response = await fetch('https://randomuser.me/api');
          if(response.status === 200){
              const res = await response.json();
              setData(res.results[0]);
              // also try this: setData(res) 
              // also try this: setData(res.result)
          }else{
              throw new Error('Unable to fetch data')
          }
      }
      
      return(
          &lt;div&gt;
              &lt;button onClick={() =&gt;{getInfo()}}&gt;fetch data&lt;/button&gt;
              {data}
          &lt;/div&gt;
      )
  }
  </code></pre>