How to use Check Box in React Native in a JavaScript map function?

Question

I am creating a React Native App in which I am using the Checkbox in a javascript map function. Due to that when I check one checkbox it checks all the other checkboxes as well. How can manage to check the checkboxes separately and also I could check them multiple times from the map function list.

Here is the code for some references :

<Card noShadow style={styles.card}>
                    <CardItem header bordered>
                        <Text style={styles.header}>{string.color}</Text>
                    </CardItem>
                    {this.state.details.map((data, i) => {
                        return (
                            <List key={i}>
                                <CardItem>
                                    <CheckBox style={styles.checkbox}
                                        checked={this.state.checkedDefault} onPress={() => this.setState({ checkedDefault: !this.state.checkedDefault })} />
                                    <Text note style={styles.textWrap}>{data.name}</Text>
                                </CardItem>
                            </List>
                        )
                    })}
                </Card>

This is beacuse you are setting state value `this.state.checkedDefault` and using same for all the check-boxes. So if it is true all check-boxes will get checked. — ravibagul91, May 10 '19 at 10:35
One possible solution is don't control your checkbox i.e. don't do this `checked={this.state.checkedDefault} ` instead use `refs` — ravibagul91, May 10 '19 at 10:39
You just need to handle an array of checked fields, one per checkbox instead of just one, and reflect that state in checkbox list — Milore, May 10 '19 at 10:45
@ravibagul91 How can I use refs in Checkbox? I haven't used it before so can you please explain it with an example? — ahd786, May 10 '19 at 10:52
check this - https://stackoverflow.com/questions/36833192/get-the-value-of-checkbox-using-ref-in-react — ravibagul91, May 10 '19 at 10:56

score 0 · Accepted Answer · answered May 10 '19 at 10:53

You need to use object for that, change your render method like below

<Card noShadow style={styles.card}>
    <CardItem header bordered>
        <Text style={styles.header}>{string.color}</Text>
    </CardItem>
    {this.state.details.map((data, i) => {
        return (
            <List key={i}>
                <CardItem>
                    <CheckBox style={styles.checkbox}
                        checked={!!this.state.checkedDefault[i]}
                        onPress={
                            () => this.setState(state => {
                                const checkedDefault = {...state.checkedDefault};
                                checkedDefault[i] = !checkedDefault[i];
                                return { checkedDefault }
                            })
                        } />
                    <Text note style={styles.textWrap}>{data.name}</Text>
                </CardItem>
            </List>
        )
    })}
</Card>

don't forget to assign initial value for checkedDefault in state, like below

state = {
   //other values
   checkedDefault: {}
}

Also you can use an id property, if exists on the items in details array instead of i to assign the value in the object

How to use Check Box in React Native in a JavaScript map function?

1 Answers1