title: React - State Hook map is not a function
body: <p>I know there are similar questions, but I can't find out why the error happens. Div shows, but then app crashes (as if was some length problem)</p>
  
  <p>Code is similar to examples I found, like this <a href="https://codesandbox.io/s/93456l21np" rel="noreferrer">sandbox</a></p>
  
  <p>What am I doing wrong? </p>
  
  <p>this is component:</p>
  
  <pre><code>import React, { useState, useEffect } from 'react'
  /* import Button from '../Button' */
  import { getPlanets } from '../../services/index'
  import './Planetas.css'
  
  
  const Planetas = () =&gt; {
  
      const [planetas, setPlanetas] = useState([]);
  
      useEffect(() =&gt; {
          const fetchPlanetas = async () =&gt; {
              const planetas = await getPlanets()
              setPlanetas({ planetas })
          };    
          fetchPlanetas()
      }, []);
  
  
      return (
        &lt;div className="planetas"&gt;
        {
          planetas.map((planeta, key) =&gt; {
              return &lt;div key={key}&gt;{planeta.name}&lt;/div&gt;
          })
        }
        &lt;/div&gt;
      )
  }
  
  export default Planetas
  </code></pre>
  
  <p>this is api service:</p>
  
  <pre><code>import axios from 'axios'
  
  const BASE_URL = 'https://swapi.co/api/planets'
  
  export const getPlanets = async() =&gt; {
      const planets = await axios.get(`${BASE_URL}`).catch((e) =&gt; {
          console.error(e);
      })
      console.log('resp\n')
      console.log(planets.data.results)
  
      return planets.data.results
  }
  </code></pre>
  
  <p>error:</p>
  
  <p><a href="https://i.stack.imgur.com/MzsRU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MzsRU.png" alt="enter image description here"></a></p>