react-native : How to render check box inside flatlist

Question

I created a checkbox inside my flatlist but when I click on the checkbox all the check boxes will render. I want to render the checkbox I press not the entire checkboxes.

This is my code:

const list = [
  {
    name: 'Kevin',
    id:0
  },
  {
    name: 'John',
    id:1
  },
]
export default class TestingScreen extends Component {
  constructor(props) {
    super(props)
    this.state = {
      checked: false
    }
  }

  handleCheckBox = () => this.setState({ checked: !this.state.checked })

  renderItem = ({ item }) => (
    <ListItem
      title={<View><Text>{item.name}</Text></View>}r
      leftAvatar={
        <View>
        <Image
                  style={{width:50, height:50,borderRadius:25 }}
                  source={require('../Components/Assets/oval.png')} />
        </View>
      }
      rightAvatar={
        <CheckBox
          checked={this.state.checked}
          onPress={() => this.setState({checked: !this.state.checked})}
        />
      }
    >
    </ListItem>

  )

  render() {
  return(
    <View style={styles.container}>
    <FlatList
         keyExtractor={this.keyExtractor}
         data={list}
         renderItem={this.renderItem}
         extraData={this.state}
       />
      </View>
    )
  };
}

Is there a way I could just render the checkbox I pressed? Any comments or advise would be really helpful thanks! :)

Answer 1

save the item.id in the state when triggering onPress

Example :

this.state = {
    checked : null
}

then in your checkbox :

<CheckBox
  checked={this.state.checked === item.id}
  onPress={() => this.setState({checked: item.id})}
/>

OR

you can do it like

this.state = {
  list: list,
},

then in your flatlist

          <FlatList
              keyExtractor={this.keyExtractor}
              data={this.state.list}
              renderItem={({item, index}) =>

                  <ListItem>
                      <Left>
                          <Text>{item.name}</Text>
                      </Left>
                      <Right>
                            <CheckBox
                              checked={item.checked}
                              onPress={() => this.onCheck(item,index)}
                            />
                      </Right>
                  </ListItem>

              }
              extraData={this.state}
          />

oncheck function

onCheck = (item, i) => {
      let items = this.state.list;
      items[i].checked = items[i].checked ? ! items[i].checked : true
      this.setState({list:items})

    }

Answer 2

You are using the same state variable for all your checkboxes. Clicking on one of the checkboxs will update the single global variable checked you gave to all checkboxes.

You have to either create a checkBox component with his own state or update a variable inside the list you are using to render the different items.

For example:

1)Move your list variable inside the state adding a checked key:

const list = [
  {
    name: 'Kevin',
    id:0,
    checked:false
  },
  {
    name: 'John',
    id:1,
    checked:false
  },
] 



 this.state = {
  list: list
}

2) Use the state into the flatList data:

<FlatList
     keyExtractor={this.keyExtractor}
     data={this.state.list}
     renderItem={this.renderItem}
     extraData={this.state}
/>

3) Change the onPress of the checkBox:

<CheckBox
      checked={this.state.list[item.id].checked}
      onPress={() => this.checkThisBox(item.id)}
    />

where:

checkThisBox=(itemID)=>{
   let list=this.state.list
   list[itemID].checked=!list[itemID].checked
   this.setState({list:list})
}