checking one checkbox checks all react native - react-native

Question

When I select one checkbox, all checkboxes in the app get selected. How do I stop this?
I am using this checkbox https://github.com/react-native-checkbox/react-native-checkbox
const [toggleCheckBox, setToggleCheckBox] = useState(false);
return (
<>
<Provider>
{userProducts.length > 0 ? (
userProducts.map(userProduct => (
<ListItem
title={
userProduct.product + ' val: ' + userProduct.val
}
trailing={
<CheckBox
disabled={false}
value={toggleCheckBox}
onValueChange={newValue => setToggleCheckBox(newValue)}
/>
}
/>
))
) : (
<Text>Nothing in your list yet</Text>
)}
</Provider>
</>
);

Answer 1

you should create your own checkbox component and set the state inside it, so you can pass the state from and to it from the parent component

Answer 2

Because all of your checkbox are using 1 value toggleCheckBox to check state. The easiest way is create child component wrap checkbox inside, and manage state from it

Answer 3

<CheckBox
disabled={false}
//on Value you can try
value={!toggleCheckBox}
onValueChange={newValue => setToggleCheckBox(newValue)}
/>

Answer 4

This is obvious that you are mapping your checkboxes. While you are maintaining state of check or uncheck in just one toggleCheckBox state. So when this is true, all are checked and when it's false, all are unchecked. Here is an existing answer to your question. In case of any confusion or ambiguity, please feel free to ask in the comments section below.