React: Can't access array data in component state with indices

Question

As a practice project, I've started building a small Pokedex app in React.

import React, { Component} from 'react';
import './App.css';
import Card from './components/card/Card.component';

class App extends Component{
    constructor(){
        super();
        this.state = {}
    }


    componentDidMount(){
        let pokeDataArr = []

        const getPokemonData = async() => {
            const dataResponse = await fetch(
                'https://pokeapi.co/api/v2/pokemon?limit=10'
            );
            const dataArr = await dataResponse.json();

            const dataArr2 = await dataArr.results.forEach(i => {
                fetch(i.url)
                .then(dataResponse => dataResponse.json())
                .then(json => pokeDataArr.push(json))
            }) 

            this.setState({ pokeDataArr }, () => console.log(this.state))
        }

        getPokemonData();
    }

    render(){
        return(
            <div>Pokedex!</div>
        )
    }
}

I'm having trouble accessing data from a specific index in an array.

When I log the entire state object to the console, I can see all the data I have retrieved from the AJAX call.

this.setState({ pokeDataArr }, () => console.log(this.state))

And this is the result in the console: console result

However, if I try to log out data from an index in the array with:

this.setState({ pokeDataArr }, () => console.log(this.state.pokeDataArr[0]))

I get "undefined" in the console: console result 2

As far as I'm aware, whatever function you run in the this.setState method's callback, it should run after setState has finished.

My goal is to use the data from this.state.pokeDataArr to make cards that display the info of each individual pokemon, but it seems like I'm stuck until I find a way to extract the data from the array and I have no clue what I'm missing.

Thank you for your time.

what happens if you console.log(this.state[0]) instead?

Tim Gerhard
– Tim Gerhard

2020-06-19 18:35:31 +00:00
Commented Jun 19, 2020 at 18:35 — Tim Gerhard
– Tim Gerhard, Commented Jun 19, 2020 at 18:35

Tim Gerhard · Accepted Answer · 2020-06-19 18:44:40Z

2

I think you messed up with your react state. Usually, what people do is they set up their react state as an object with other elements (arrays, objects, strings, whatever) inside it. This looks something like this:

 constructor(){
        super();
        this.state = {
           myObject: {},
           somethingElse: "",
           anArray: []
        }
 }

This enables you to access parts of your state like this: this.state.myObject for instance. (this would return {})

In your example, you defined your state as an empty object.

constructor(){
    super();
    this.state = {}
}

And later, you set this object to an object, with an array inside:

this.setState({ pokeDataArr });

This will set your state to this: {[(your array)]} To prevent this initialize your state like this:

constructor(){
    super();
    this.state = { pokeDataArr : {} }
}

And set your values like this:

this.setState({ pokeDataArr: pokeDataArr }, () => console.log(this.state.pokeDataArr[0]))

read more here: https://reactjs.org/docs/state-and-lifecycle.html

answered Jun 19, 2020 at 18:44

Tim Gerhard

3,6272 gold badges24 silver badges41 bronze badges

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

5 Comments

Tim Gerhard Over a year ago

actually, if you want, you could now (after your state has been correctly initialized) use the same code you used before, since javascript automatically understands, that you want to update "pokeDataArr" if your variable has the same name

Lenny Van Riel Over a year ago

Thanks for the response Tim! Thing is, that was actually how I wrote my code initially. Even with declaring the variable in the state, it still gives me the same result unfortunately.

Tim Gerhard Over a year ago

really? I almost cannot believe this.. can you try again, just to verify it's truly not working?

Lenny Van Riel Over a year ago

Yeah, tried it again, same results. It's so weird that I can log out the entire 'this.state.pokeDataArr' array, but when I add the square brackets with an index, it just logs 'undefined'. I somehow feel like there's some asynchronous stuff happening behind the scenes, that I don't understand yet, that's causing the problem.

Tim Gerhard Over a year ago

what happens if you put the console.log in the render() function? because if it was an async error you would get the correct result here

Bhojendra Rauniyar · Accepted Answer · 2020-06-19 18:50:28Z

0

You'll need to use updater to use the callback instead of plain state update:

this.setState(
  () => ({ pokeDataArr }), 
  () => console.log(this.state.pokeDataArr[0])
)

Read the note from the docs in the linked example:

Subsequent calls will override values from previous calls in the same cycle, so the quantity will only be incremented once. If the next state depends on the current state, we recommend using the updater function form

edited Jun 19, 2020 at 18:50

answered Jun 19, 2020 at 18:42

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

Collectives™ on Stack Overflow

React: Can't access array data in component state with indices

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related