ReactJs, this.setState not working as I expect it to do

Question

I'm new here so sorry if I don't give every informations you would want at first, I'm not used to post questions, and sorry for my awful english...

I'm creating a component with 2 lists of players, represented with subcomponents "PlayersList": the players that will play and the players that are waiting to play. On every player item in the waiting list I create a button that will push him in the playing list: so I want to remove him from the waiting list (a subcomponent) and add him to the playing list (another subcomponent)

=========================================================================

The important things of my parent component (that contains the 2 sublists):

constructor(){
        super();
        this.state = { tournament: {}, players:[],waitingPlayers:[],id: window.location.pathname.split('/')[2]};
        this.parentSetState = this.parentSetState.bind(this);
    }

    //My function called in childs to update the state of player/waiting player list in the parent
    parentSetState(players,waitingPlayers){
        console.log("PARENT SET STATE ===");
        console.log(players);
        console.log(waitingPlayers);
        this.setState({players:players,waitingPlayers:waitingPlayers});
    }

    //I get the list of players and waitingplayers in an object given by getTournaments
    componentDidMount() {
        getTournaments({_id:this.state.id}).then(res => this.setState({ tournament: res[0],players:res[0].players, waitingPlayers:res[0].waitingPlayers}));
    }

And how the list are created in its render:

//List of players that will play
<PlayerList waiting={false} tournament={this.state.tournament} players={this.state.players} waitingPlayers={this.state.waitingPlayers} update={this.parentSetState}/>

//List of players that are waiting
<PlayerList waiting={true} tournament={this.state.tournament} players={this.state.players} waitingPlayers={this.state.waitingPlayers} update={this.parentSetState}/>

=========================================================================

And now in the child "PlayerList":

constructor(){
        super();
        this.state = {
            tournament:[],
            waiting:false,
            players:[],
            waitingPlayers:[]
        };
}
componentDidMount(){
  this.setState({
    tournament:this.props.tournament,
    waiting:this.props.waiting,
    players:this.props.players,
    waitingPlayers:this.props.waitingPlayers
  });
}

And then for every player in the list, if this.props.waiting == true (this list is the waiting list), I create a button, and when I click on the button I use the method:

var newPlayers=[...this.state.players];
var newWaitingPlayers=[...this.state.waitingPlayers];
newPlayers.push(group);//"group" is the player I push to the player list and splice from the waiting list
newWaitingPlayers.splice(newWaitingPlayers.indexOf(group));
this.props.update(newPlayers,newWaitingPlayers);

My problem here is that after this method is called, it calls parentSetState() in the parent that contains the 2 lists, I tested and the function is called with the good updated lists, it calls this.setState() in the parent and updates well this.state.players and this.state.waitingPlayers in the parent, at the beginning of render() of the parent players and waitingplayers are updated but in the render() of the childs it isn't...

Thanks a lot to help me !

Answer 1

Ok I found the answer. The problem is that I was using this.state in my childs instead of this,props, so when I updated the props given in the parent component, it wasn't updated in the child !