title: Button Click to display the API data on screen using array of objects
body: <p>I am trying to fetch the API data results not on the console but on the screen itself on a button click. I was able to do that using UseEffect without using a button .. but I am being unable to do that with the button. The error it gives me on this code is something like this:</p>
  <pre><code>&quot;TypeError: items.map is not a function&quot;
  </code></pre>
  <p>and when I try to use simple string on the usestate like <code>Usestate('')</code> and then do my code it gives me an error like this:</p>
  <pre><code>&quot;Error: Objects are not valid as a React child (found: object with keys {results, info}).
  If you meant to render a collection of children, use an array instead.&quot;
  </code></pre>
  <p>I don't even understand the error as I am new to react. Is it because I am using axios? and not fetch.. How can I get it on the screen?</p>
  <pre><code>import React, {useState} from 'react'
  import axios from 'axios'
  
  function Things() {
  const [items, setItems] = useState([])
  
  
  function fetchRandomData() {
      axios.get('https://randomuser.me/api/').then(
          (response) =&gt; {
              setItems(response.data)
          }
      );
   }
   return (
      &lt;div&gt;
        &lt;button onClick={fetchRandomData}&gt;Fetch Random Data&lt;/button&gt;
        &lt;div&gt;
        {items.map(item =&gt; (
        &lt;li key={item.status}&gt;{item.data.results}&lt;/li&gt;
      ))};
        &lt;/div&gt;
        
       
       
  
  
  
  
          
      &lt;/div&gt;
      );
      };
     export default Things
  </code></pre>