CODEWITHSUNDEEP
react-native
mohamed adel
mohamed adel

Reputation: 715

ReactNative checkbox inside flatlist

I have checkboxes inside Flatlist like this

constructor(props) {
  super(props);
    this.state = { 
      checked: false
    }
 }
 breakfastData = ({item}) => {
   return(
        <ListItem style={{flex:1 , flexDirection: 'row' , justifyContent:'space-between'}} >
          <Text>{item}</Text>
          <CheckBox 
              checked={this.state.checked}
              onPress={() => this.setState({checked: !this.state.checked})}  style={{ alignSelf: 'flex-end'}} color="#FC7B04" />
        </ListItem>
        )
 }
 render(){
   return(
        <View>
          <FlatList
            data={this.state.breakfast}
            renderItem={ this.breakfastData }
            keyExtractor={(item, index) => index}
          />
        </View>
        )
 }

here is a screenshot from the app but the checkboxes don't work when i click any of the check boxes i just want the user feel that the check box is checked enter image description here

Upvotes: 0

Views: 518

Answers (1)

Zem Zem
Zem Zem

Reputation: 139

You must set checked for each item.

      constructor(props) {
        super(props);
        this.state = { 
          breakfast:[
          {id:1,checked:false},
          {id:2,checked:false}
          ]
        }
      }
onItemPress = (item, index) => {
    var tempItem = item
    tempItem.checked = !item.checked
    const tempArr = [...this.state.breakfast]
    tempArr[index] = tempItem
    this.setState({
      breakfast: tempArr
    })
  }
              breakfastData = ({item}) => {
               return(
              <ListItem style={{flex:1 , flexDirection: 'row' , justifyContent:'space-between'}} >
                <Text>{item}</Text>
                <TouchableOpacity  onPress={() => {this.onItemPress(item,index)}}>
                       <CheckBox  checked={item.checked}  style={{ alignSelf: 'flex-end'}} color="#FC7B04" />
                </TouchableOpacity>
              </ListItem>
            )
          }
        render(){
        return(
        <View>
                        <FlatList
                          data={this.state.breakfast}
                          renderItem={ this.breakfastData }
                          extraData ={ this.state}
                          keyExtractor={(item, index) => index}

                        />
        </View>
        )
        }

Upvotes: 2

Related Questions