Not able to change the state of a CheckBox in React Native

Question

I am trying to render and map a list of names with a checkbox next to it. I was successful in doing that. However when I try to change the state of the CheckBox, the name I tap on disappears and a warning pops up that says "Each child in a list should have a unique "key" prop. The checkbox obviously does not change state. This is a sample of the list of names saved in namesList.js

 {
    id: 1,
    fName: "name",
    lName: "name",
    present: false,
},

Here is how I have mapped it in the renderMethod of newGroup.js:

render() { 
    const myPlayers = this.state.allPlayers.map(name => 
        <Player 
            key={name.id} 
            id={name.id}
            checked={name.present} 
            handlePress={this.handlePress}
            fName={name.fName} 
            lName={name.lName}
        />)

and here is the handlePress method placed above the render yet inside the class:

    handlePress(id){
    this.setState(prevState => {
        const newList = prevState.allPlayers.map(name => {
            if(name.id === id){
                return name.present = !name.present
            }
            return name
        })                
        return {
            allPlayers: newList,
        }
    })
    console.log("pressed", id)
}

Here is my constructor:

constructor() {
    super()
    this.state = { 
        allPlayers: namesList,
     }
    this.handlePress = this.handlePress.bind(this)
}

and finally, my player component which is placed in player.js

const player = (props) => {
return ( 
        <View  key={props.id} style={styles.container}>
            <CheckBox 
                key= {props.id}
                onPress={() => props.handlePress(props.id)} 
                checked={props.checked} 
                size={30} 
                checkedColor="#ff7f00" 
                uncheckedColor="#ff7f00" 
            />
            <Text style={styles.name}>{props.fName} {props.lName}</Text>
        </View>
 );

}

Can anyone identify why my checkbox is not working? Note that when I replaced the handlePress method with a simple

console.log("pressed",id)

it functioned completely fine.

Answer 1

It looks like in your handlePress {allPlayers} will sometimes return a list of objects and sometimes a list of booleans and objects. This could be fixed by removing a return statement.

const newList = prevState.allPlayers.map(name => {
            if(name.id === id){
                name.present = !name.present
            }
            return name;
        })  

Now you return a list of objects every time.

Answer 2

Could you try this?

handlePress(id){
    this.setState( {
        allPlayers:this.state.allPlayers.map((name)=>name.id===id?({...name,present:!name.present})):name
       })
}