checking one checkbox checks all react native-CodePudding

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>
    </>
  );

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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