title: How do I properly set up an API call using useEffect?
body: <p>Here is my entire component. In the console the correct data is showing up at &quot;data&quot; but when I try to run map on it it says &quot;map is not a function.&quot; The 16 items in the console are the correct beaches.</p>
  <pre><code>import React, {useState, useEffect} from 'react';
  import axios from 'axios';
  
  
  export default function Beaches() {
      const [data, setData] = useState({beaches: []})
      // const [hasError, setErrors] = useState(false)
  
  
      useEffect(() =&gt; {
          const fetchBeaches = async () =&gt; {
              const result = await axios('http://localhost:3000/beaches');
              setData(result.data);}
              fetchBeaches();
          }, [])
              
      console.log(data)
  
  
  return (
  
      &lt;ul&gt;
          {data.beaches.map(beach =&gt; (
              &lt;button&gt;{beach.name}&lt;/button&gt;
          ))}
      &lt;/ul&gt;
  )
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/vDnR3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vDnR3.png" alt="enter image description here" /></a></p>