delete an element form a list using react

Question

I have this state

this.state = {

    playerList: {
        player: [
            {
                playerAlias: [
                    {
                        name: null
                    }
                ],
                idPlayer: null,
                playerName: null,
                broadcastChannel: null,
                clusterName: null
            }
        ]
    }

}

What I want to do is to delete one player from my playerList.To do that I did the following:

deleteAliasToList = (player, alias) => {

    player.playerAlias.pop(alias)


    this.setState(prevState => ({
        ...prevState,
        playerList: {
            ...prevState.playerList,
            player: [...prevState.playerList.player, player]
        }
    }))

}

I have tested out with prints and this works properly.

This is what Im presenting when rendering the page:

The first name on the player is represented by {player.playerName} and the second name is that same representation but inside an input field:

                                    <input type="idPlayer" defaultValue={player.playerName} style={{ width: 100 + '%' }} onChange={this.handleChange} />

When I delete an item, the first name deletes successfully but the names inside the input field are buggy and I dont know why:

On the picture above I have deleted the player A, and as you can see it starts with player B,then C and so forth but the names on the input filed are like B,B,C,D etc instead of B,C like the ones that are not on the input filed.

I really dont know why that happens. Thanks in advance!

Update with rener method:

render() {

    this.state.playerList.player.map((pl) => {
        window.alert("render " + JSON.stringify(pl))
    })

    return (
        <div>
            <HeaderApp />
            <div className="container">
                <h1>Title</h1>
                {this.state.playerList.player.map((player) => {
                    return (
                        <div>
                            <GenericCard cardTitle="Player">
                                <button type="button" class="close" aria-label="Close" onClick={() => this.deletePlayer(player)}>
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <br />
                                {player.playerName}
                                <input type="idPlayer" defaultValue={player.playerName} style={{ width: 100 + '%' }} onChange={this.handleChange} />

                         (....)

can you show us the code in the render method. I think the problem comes from the key property when you are rendering the list of players, you are probably using index for the key, you should use a unique identifier — Olivier Boissé
– Olivier Boissé, Commented May 18, 2019 at 18:49

Olivier Boissé · Accepted Answer · 2019-05-18 19:16:54Z

1

you should specify a key property when you are rendering a list of element https://reactjs.org/docs/lists-and-keys.html

Adding a key to the div element should solve your problem of deleting elements in a list which contains uncontrolled input element

{this.state.playerList.player.map((player) => {
     return (
        <div key={player.idPlayer}>

I suppose the idPlayer is unique

answered May 18, 2019 at 19:16

Olivier Boissé

18.5k7 gold badges54 silver badges70 bronze badges

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

Collectives™ on Stack Overflow

delete an element form a list using react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related