React - State Hook map is not a function

Question

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 = 'https://swapi.co/api/planets'

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:

`map` is array function not `object`. and I think your `planetas` is object. — Kaushik, Jul 12 '19 at 05:28
are fetiching your **planetas** from other api, if yes than use **{planetas && planetas.map((planeta, key) => {** to check and wait until u are getting the value of planetas — Shubham Tiwari, Jul 12 '19 at 05:36

score 10 · Accepted Answer · answered Jul 12 '19 at 05:28

10

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)

answered Jul 12 '19 at 05:28

Prithwee Das

4,628
2
16
28

score 3 · Answer 2 · answered Jul 12 '19 at 06:02

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()
    }, []);

score 1 · Answer 3 · answered Feb 02 '22 at 20:57

1

I had a similar problem and I used:

Object.values(array).map()

It worked for me. I hope help somebody else.

answered Feb 02 '22 at 20:57

M. Henrique

11
1

1

Your answer is also correct, but it would be helpful and good practice to add some explanation about what code is doing. – Sagar Darekar Feb 03 '22 at 04:10
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 03 '22 at 04:10

score 0 · Answer 4 · answered Jul 12 '19 at 05:43

0

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

answered Jul 12 '19 at 05:43

Minh Kha

1,052
8
13

React - State Hook map is not a function

4 Answers4