Handling checkbox in react-native using map()

Question

I am using '@react-native-community/checkbox' as I am retrieving data from database and rendering it whiting checkboxes using map function, the problem is when I check one box all boxes checked as well and same when I uncheck the problem is with state of each checkbox but I have no idea how to handle that as I want to make only sleeted checkbox being checked and get all its data into one array for further process.

here the data I am rendering as checkboxes:

{"id": "12345", "price": 5, "text": "Reload"}

and this is the code of map function:

{data.map((b, index) => {
         return (
                   <View key={b.id} style={{ flex: 1, flexDirection: 'column', width: windowWidth, paddingLeft: 15, paddingRight: 15 }}>
                   <View style={{ flexDirection: 'row-reverse', alignItems: 'center', justifyContent: 'space-between' }}>
                          <CheckBox
                             disabled={false}
                             value={checked}
                             onValueChange={(newValue) => { setIschecked(newValue) }}

                            />

                          <Text>{b.text}   </Text>
                   </View>

                   <View style={{ flexDirection: 'row', alignItems: 'center' }}>

                         <Text style={{ fontSize: 10, fontWeight: 'bold', color: COLORS.darkgray }}>  
                            {" USD " + b.price} 
                         </Text>
                   </View>



              </View>
           )
       })}

I found a question same as my problem exactly which this one but unfortunately that doesn't work for me

thanks and advance

If you have an array of items, you cannot use just one flag to store state for all of them (unless you want radio boxes), you need to have an array of checked items instead so it'll be value={checked[b.id]} and const newArray = checked.slice(), newArray[b.id]=newValue;setIschecked(newArray) — Nadia Chibrikova
– Nadia Chibrikova, Commented Apr 10, 2021 at 12:02
@NadiaChibrikova i got this error ypeError: checked.slice is not a function. (In 'checked.slice()', 'checked.slice' is undefined). what i did i passed newValue to function the do the following const newArray = checked.slice(); newArray[b.id]=newValue;setIschecked(newArray) — anie
– anie, Commented Apr 10, 2021 at 14:09
You need to initiate checked as an array when you can useState — Nadia Chibrikova
– Nadia Chibrikova, Commented Apr 10, 2021 at 15:22
so it will be something like this right? const [checked, setIschecked] = useState([]) — anie
– anie, Commented Apr 10, 2021 at 16:15

jered · Accepted Answer · 2021-04-24 02:55:54Z

3

+50

You'll have to store the state of your checkboxes separate from the data itself, in React state.

First create an empty object on first render, this will act as a map of checkbox ids to their checked value:

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

Inside your map you can find the value of that particular checkbox based on b.id:

value={checked[b.id]}

Finally in your callback, make sure you update the right value in checked also based on b.id:

onValueChange={(newValue) => { setChecked({...checked, [b.id]: newValue}) }}

Put it all together:

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

// rest of your render function

     {data.map((b, index) => {
         return (
                   <View key={b.id} style={{ flex: 1, flexDirection: 'column', width: windowWidth, paddingLeft: 15, paddingRight: 15 }}>
                   <View style={{ flexDirection: 'row-reverse', alignItems: 'center', justifyContent: 'space-between' }}>
                          <CheckBox
                             disabled={false}
                             value={checked[b.id]}
                             onValueChange={(newValue) => { setChecked({...checked, [b.id]: newValue}) }}

                            />

                          <Text>{b.text}   </Text>
                   </View>

                   <View style={{ flexDirection: 'row', alignItems: 'center' }}>

                         <Text style={{ fontSize: 10, fontWeight: 'bold', color: COLORS.darkgray }}>  
                            {" USD " + b.price} 
                         </Text>
                   </View>



              </View>
           )
       })}

answered Apr 24, 2021 at 2:55

jered

11.6k2 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

anie Over a year ago

thank you so much, may i know how I can make this call back setChecked({...checked, [b.id]: newValue} in function, mean i want to call a function in onValueChange props and the checked boxes status update happened in called function

jered Over a year ago

@anie I'm not sure what you mean. You want to still call setIsChecked() inside of the callback function? The onValueChange callback can be whatever function you want, just refactor accordingly. I updated my answer assuming you still want to call setIsCheck(). But if that doesn't answer your question, then please ask it in a new question as it sounds like a separate issue.

Collectives™ on Stack Overflow

Handling checkbox in react-native using map()

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related