checking CheckBoxes created using map method

[munsim]

Hi

My react native app needs to create list of checkBoxes using map method. User presses button - new checkbox appears (with some text next to it). You can call it a todo list.

I used example from docs:
` const [toggleCheckBox, setToggleCheckBox] = useState(false)

<CheckBox
disabled={false}
value={toggleCheckBox}
onValueChange={(newValue) => setToggleCheckBox(newValue)}
/>`

So lets say i have 3 checkboxes, all with the same value. When i tick on 1 checkbox - all checkboxes are ticked.

So how can I tick only 1 checkbox? Please, note user still should be able to remove and add checkboxes.

[ManiAzza]

Same problem here !!

[JonasJs]

2. Same problem here !!

[JonasJs]

In the native functions of the library I'm didn't find, so I ended up creating my own example.
The code and concept may not be the best, but that's what I found and I believe we can improve.

1. State with dynamic options

const [options, setOptions] = useState([
    {
      label: "item 1",
      actived: false
    },
    {
      label: "item 2",
      actived: false
    },
    {
      label: "item 3",
      actived: false
    }
  ]);

2. Method to select one option.

  function handleSelectOption(label){
    const newItems = [...options];
    const newOptions = newItems.map(item => {
      return {
        ...item,
        actived: item.label === label,
      }
    });
    
    setOptions(newOptions);
  }

3.Rendered code.

The disabled parameter is true to remove the toggle function.

{options.map((item, index) => (
   <TouchableOpacity key={index} onPress={() => handleSelectItem(item.label)}>
    <CheckBox
      disabled={true}
      value={item.actived}
    />
  </TouchableOpacity>
))}

[andreas-bergstrom]

You need to put the checkbox in it's own component and put the state inside that component.