React - State Hook Map Is Not a Function

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)

Code is similar to examples I found, like this sandbox

What am I doing wrong?

this is component:

import React, { useState, useEffect } from 'react'
/* import Button from '../Button' */
import { getPlanets } from '../../services/index'
import './Planetas.css'


const Planetas = () => {

    const [planetas, setPlanetas] = useState([]);

    useEffect(() => {
        const fetchPlanetas = async () => {
            const planetas = await getPlanets()
            setPlanetas({ planetas })
        };    
        fetchPlanetas()
    }, []);


    return (
      <div className="planetas">
      {
        planetas.map((planeta, key) => {
            return <div key={key}>{planeta.name}</div>
        })
      }
      </div>
    )
}

export default Planetas

this is api service:

import axios from 'axios'

const BASE_URL = '

export const getPlanets = async() => {
    const planets = await axios.get(`${BASE_URL}`).catch((e) => {
        console.error(e);
    })
    console.log('resp\n')
    console.log(planets.data.results)

    return planets.data.results
}

error:

2

4 Answers

setPlanetas({ planetas }) in this line you're setting your state to be an object with a planetas property, instead you need to do setPlanetas(planetas)

you have planetas state which is array data types but when you update planetas state you updated state with curly braces outside response array i.e setPlanetas({ planetas }) instead of setPlanetas(planetas).

useEffect(() => {
        const fetchPlanetas = async () => {
            const planetas = await getPlanets()
            setPlanetas(planetas) // remove curly braces here
        };    
        fetchPlanetas()
    }, []);

I had a similar problem and I used:

Object.values(array).map()

It worked for me. I hope help somebody else.

2

Need an array here to map. => setPlanetas(planetas).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Marcus Vance

Marcus Vance

Cybersecurity & Digital Privacy Researcher

Marcus Vance is a cybersecurity auditor and technology writer dedicated to educating the public about online safety, data privacy regulations, enterprise security, and emerging cyber threats.

Share this article
Twitter Facebook Pinterest