Why is splice method removing only first array index in React?

Question

I'm making a small application in React with the PokeAPI and am having issues with using the splice() method to remove an element (pokemon) from the array (team). No matter which element I pick to remove it only removes the first element in the array.

This is the function -- which is being passed down through props -- I'm using in order to delete the item.

removePokemon = (index) => {
  const team = [...this.state.team]
   team.splice(index, 1)
   this.setState({team})
  }

And here is the Team component where it's actually being used.

import React, { Component } from 'react';
import Button from 'react-bootstrap/Button'


class Team extends Component {
    render() {
        return (
            <div>
                <h2>{this.props.trainer && <p>{this.props.trainer}'s Team</p>}</h2>
                {this.props.team &&
                <div>
                    {this.props.team.map((pokemon, i) => (
                        <div key={pokemon.id}>
                            <span className='cardHeader'>#{pokemon.id} - {pokemon.name}</span>
                            <img src={pokemon.sprites.front_default} alt={pokemon.name}/>
                            <Button onClick={this.props.removePokemon}>Remove from team</Button>
                        </div>
                    ))}
                </div>
                }

            </div>
        );
    }
}

export default Team;

onClick={this.props.removePokemon} vs function removePokemon (index) { ... } - What's missing on the left side? — Andreas
– Andreas, Commented May 28, 2019 at 15:22
Try adding some logging to your function - i.e. console.log to check what value index is, I believe that is where the issue lies. — Liam MacDonald
– Liam MacDonald, Commented May 28, 2019 at 15:22
If you are new to React, take a look at debugging, but since this is a small problem, you could simply do a console.log(index) in removePokemon. — sebamed
– sebamed, Commented May 28, 2019 at 15:26

Andrii Golubenko · Accepted Answer · 2019-05-28 15:25:58Z

1

You don't pass an argument index to your function removePokemon:

You need to edit one row:

<Button onClick={() => this.props.removePokemon(i)}>Remove from team</Button>

answered May 28, 2019 at 15:25

Andrii Golubenko

5,2091 gold badge26 silver badges29 bronze badges

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

Comments

Sahil Raj Thapa · Accepted Answer · 2019-05-28 15:41:02Z

1

Since you have not passed index as argument to onClick={this.props.removePokemon}.

index inside removePokemon method refers the event object. So the code

team.splice(index, 1) evaluates to team.splice(eventObject, 1).

That's why splice is removing first element of the array.

You can change to onClick={() => this.props.removePokemon(i)}to remove the element you want.

edited May 28, 2019 at 15:41

answered May 28, 2019 at 15:27

Sahil Raj Thapa

2,4833 gold badges16 silver badges25 bronze badges

1 Comment

Andreas Over a year ago

index won't be undefined but an event object

Collectives™ on Stack Overflow

Why is splice method removing only first array index in React?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related