Issue

This Content is from Stack Overflow. Question asked by Abdul Saboor

I have a list of Items along with Check Box. I face a problem that when I click on a single check box all the checkboxes are selected. I want to check only those box who I will select.

const Items = ({item, index}) => {
    return (
<View style={styles.status}>
          <CheckBox onAnimationType='fill' offAnimationType='fade' boxType='square' disabled={false} 
          onValueChange={()=>{onChangeValue(item, index)}} />
        </View>
);}

return (
<FlatList
        keyExtractor={(item, index) => item + index}
        data={students}
        renderItem={Items}
)

Solution

you can add flag for active checkbox


const sampleData = [{
 text:"data 1",
 active:false
},
{
 text:"data 2",
 active:false
}]

//...

const [checkbox,setCheckbox] = useState(sampleData);

const changeCheckboxFlag = (index)=>{
  setCheckbox((prev)=>{
   const newCheckboxData = prev;
   newCheckboxData[index].active = !newCheckboxData[index].active;
   return newCheckboxData;
  })
}

//...

onValueChange={()=> changeCheckboxFlag(index)

This Question was asked in StackOverflow by Abdul Saboor and Answered by ucup It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.