Appending my state array in React.js

Question

clickHandler(type) {



    for (var i = 0; i < this.state.pokemon.length ; i++) {

            //console.log(this.state.pokemon[i]);
            //Do something temp1.types[0].type.name
            for(var j = 0; j < this.state.pokemon[i].types.length; j++) {

                if(this.state.pokemon[i].types[j].type.name == type.target.value) {
                    var toBeAppened = this.state.filteredPokemon.slice()
                    toBeAppened.push(this.state.pokemon[i])
                    this.setState({
                        filteredPokemon: this.state.filteredPokemon

                    })


                }


            }

    }
    console.log(this.state.filteredPokemon) 
}

This function is a handler of appending a specific part of data of my state array "pokemon" to another state array called "filteredPokemon".

After I run this, my filteredPokemon is just an empty array. I checked that this is valid by debugging with console.log, but it just does not append properly into my "filteredPokemon"

What could be the problem?

Answer 1

I could make an assumption that, the problem is, that you are setting wrong variable into state. You should set toBeAppended array instead of

clickHandler(type) {
  for (var i = 0; i < this.state.pokemon.length; i++) {
    //console.log(this.state.pokemon[i]);
    //Do something temp1.types[0].type.name
    for (var j = 0; j < this.state.pokemon[i].types.length; j++) {
      if (this.state.pokemon[i].types[j].type.name == type.target.value) {
        var toBeAppened = this.state.filteredPokemon.slice();
        toBeAppened.push(this.state.pokemon[i]);
        // you are adding an item to toBeAppened array, therefore you should set this array into state
        this.setState({
          filteredPokemon: toBeAppened
        });
      }
    }
  }
  console.log(this.state.filteredPokemon);
}

The second issue, which could be, is that types array of every pokemon is empty, therefore the second nested loop is not invoking.

Try to debug your if condition as well, probably this.state.pokemon[i].types[j].type.name == type.target.value expression is returning false

Answer 2

I'm not sure how are you handling your data. what's the pokemon object like? To me the easiest way to handle your data and filter your pokemons should be something like this:

pokemon : {
   name: 'Charmander',
   type: 'Fire',
   (...)
}

That way filtering your array of pokemons should be pretty straightforward:

clickHandler(type) {
    const { pokemon } = this.state;
    const filteredPokemon = [];

    pokemon.forEach((_pokemon) => {
      if (_pokemon.type === type) {
        filteredPokemon.push(_pokemon);
      }
    });

    this.setState({ filteredPokemon });
  }