How to use React Native Paper Checkbox or Checkbox.Item using FlatList?

Question

You can only check and uncheck at once with the current source. I want to do it one by one...

The number of lines in the obdngList list is not determined. As an example, I wrote two lines.

Help :( thank you!!

      const [checked, setChecked] = React.useState(false);

      const obdngList = 
      [ 
        {"a": "test1", "b": "test2", "c": "test3"}
      , {"a": "test111", "b": "test222", "c": "test333"}
      ];


                      <FlatList
                        data={obdngList}
                        renderItem={({ item }) => (
                          <Checkbox.Item 
                            label={item.a}
                            value={item.b}
                            status={checked ? 'checked' : 'unchecked'} 
                            onPress={() => {
                              setChecked(!checked)
                            }}
                          />
                        )}
                      />

Instead using one state for the checkbox list, use an array to store all the boolean result for each of the checkbox. — kiuQ, Oct 13 '22 at 03:09

jted95 · Accepted Answer · 2022-10-13T05:09:59.963

0

The problem with your code is you are using checked for all your checklists, meaning that if one of your checklists is "checked" then all of them will be "checked" as well.

If you want to solve your problem, you need to change the state into

const [obdngList, setObdngList] = useState([ 
    {"a": "test1", "b": "test2", "c": "test3", checked: false},
    {"a": "test111", "b": "test222", "c": "test333", checked: false}
    ]);

with this, each of the checklists has its own checked value.

Here's a solution you can try:

const [obdngList, setObdngList] = useState([
    { a: 'test1', b: 'test2', c: 'test3', checked: false },
    { a: 'test111', b: 'test222', c: 'test333', checked: false },
  ]);

  <FlatList
    data={obdngList}
    renderItem={({ item, index }) => (
      <Checkbox.Item
        label={item.a}
        value={item.b}
        status={item.checked ? 'checked' : 'unchecked'}
        onPress={() => {
          const tempArr = [...obdngList];
          tempArr.splice(index, 1, { ...item, checked: !item.checked });
          setObdngList(tempArr);
        }}
      />
    )}
  />;

edited Oct 13 '22 at 05:09

answered Oct 13 '22 at 05:02

jted95

1,084
1
9
23

The number of lines in the obdngList list is not determined. As an example, I wrote two lines. const [obdngList, setObdngList] = useState([ {"a": "test1", "b": "test2", "c": "test3"}, {"a": "test111", "b": "test222", "c": "test333"} ]); Can I add the above form to the state with the form below? const [obdngList, setObdngList] = useState([ {"a": "test1", "b": "test2", "c": "test3", checked: false}, {"a": "test111", "b": "test222", "c": "test333", checked: false} ]); – user20227016 Oct 13 '22 at 05:13
@user20227016 what do you mean? the length of the array doesn't matter, if it's empty it won't throw an error. The `checked` is needed to make sure they know which `checklist` is "checked" – jted95 Oct 13 '22 at 05:16
The state value I need to use is passed to the api. That value doesn't have 'checked: false' so it needs to be added. But I'm not sure how to add @jted95 – user20227016 Oct 13 '22 at 05:19
You may insert the element `checked: false` into the object before put into Flatlist data. `let temp = []; obdngList.forEach(element => {temp.push({...element, checked: false})}); setObdngList(temp);` – kiuQ Oct 13 '22 at 06:02
Thank you so very much!! finally solved it have a good day!!! @PeterTam – user20227016 Oct 13 '22 at 06:29
Thank you so very much!! finally solved it have a good day!!! @jted95 – user20227016 Oct 13 '22 at 06:29

How to use React Native Paper Checkbox or Checkbox.Item using FlatList?

1 Answers1