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
– Kaushik, Commented Jul 12, 2019 at 5: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
– Shubham Tiwari, Commented Jul 12, 2019 at 5:36

Prithwee Das · Accepted Answer · 2019-07-12 05:28:18Z

11

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, 2019 at 5:28

Prithwee Das

5,3162 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iambinodstha · Accepted Answer · 2019-07-12 06:02:54Z

3

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

answered Jul 12, 2019 at 6:02

iambinodstha

1,00711 silver badges12 bronze badges

Comments

M. Henrique · Accepted Answer · 2022-02-02 20:57:30Z

1

I had a similar problem and I used:

Object.values(array).map()

It worked for me. I hope help somebody else.

answered Feb 2, 2022 at 20:57

M. Henrique

111 bronze badge

2 Comments

Sagar Darekar Over a year ago

Your answer is also correct, but it would be helpful and good practice to add some explanation about what code is doing.

Community Over a year ago

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.

Minh Kha · Accepted Answer · 2019-07-12 05:43:07Z

0

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

answered Jul 12, 2019 at 5:43

Minh Kha

1,1128 silver badges15 bronze badges

Collectives™ on Stack Overflow

React - State Hook map is not a function

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related