How to only select one checkbox in a React Native Android app?

Question

I'm trying to set up my first Android app in React Native.

Now there's this card (react-native-component) with multiple checkboxes inside (see code below).

Every time I try to select only one checkbox, it somehow checks all of them.

I know it has something to do with multiple states, but I can't get it to work.

How can I only select one checkbox?

JavaScript file:

import React from "react";
import {StyleSheet, ActivityIndicator, ListView, Text, View, Alert, Platform, TouchableOpacity} from 'react-native';
import { Card, CheckBox, Button } from 'react-native-elements';

export default class AgendaItemVote extends React.Component {

    constructor(props) {
        super(props);
        this.state = { checked: false };
    }

    render(){
        return(
            <View style={styles.container}>
                <Card title="Titel Agendapunt">
                    <Text style={styles.paragraph}>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at sapien at tellus interdum finibus. Nunc sagittis tincidunt orci, non viverra ligula feugiat id. Phasellus eleifend massa neque, eu scelerisque enim feugiat ac.
                    </Text>

                    <View style={{flexDirection: 'row'}}>
                        <CheckBox
                            title='Ja'
                            checked={this.state.checked}
                            onPress={() => this.setState({
                                checked: !this.state.checked
                            })}
                        />
                         <CheckBox
                            title='Nee'
                            checked={this.state.checked}
                            onPress={() => this.setState({
                                checked: !this.state.checked
                            })}
                        />
                         <CheckBox
                            title='Onthouding'
                            checked={this.state.checked}
                            onPress={() => this.setState({
                                checked: !this.state.checked
                            })}
                        />

                    </View>
                    <View>
                        <Button
                            title="Indienen"
                        />
                    </View>
                </Card>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      paddingTop: 40,
      backgroundColor: '#ecf0f1',
    },
    paragraph: {
      margin: 24,
      fontSize: 18,
      fontWeight: 'bold',
      textAlign: 'center',
      color: '#34495e',
    },
});

Majid Parvin · Answer 1 · 2022-02-10T08:14:53.527

You have to have a specific state for each control. there is a solution for you:

   export default class AgendaItemVote extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            options: [
                {
                    title: 'Ja',
                    checked: false
                },
                {
                    title: 'Nee',
                    checked: false
                },
                {
                    title: 'Onthouding',
                    checked: false
                }
            ]
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <Card title="Titel Agendapunt">
                    <Text style={styles.paragraph}>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Vivamus at sapien at tellus interdum finibus. Nunc
                        sagittis tincidunt orci, non viverra ligula feugiat id.
                        Phasellus eleifend massa neque, eu scelerisque enim
                        feugiat ac.
                    </Text>

                    <View style={{ flexDirection: 'row' }}>
                        {this.state.options.map(opt => (
                            <CheckBox
                                title={opt.title}
                                checked={opt.checked}
                                key={opt.title}
                                onClick={() => {
                                  opt.checked = !opt.checked;
                                  this.setState({
                                        options: [
                                            ...this.state.options
                                        ]
                                    })
                            ></CheckBox>)
                        )}
                    </View>
                    <View>
                        <Button title="Indienen" />
                    </View>
                </Card>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: 40,
        backgroundColor: '#ecf0f1'
    },
    paragraph: {
        margin: 24,
        fontSize: 18,
        fontWeight: 'bold',
        textAlign: 'center',
        color: '#34495e'
    }
});

While this is right what I needed, When trying to use this code, it doesn't show any checkbox. — Splekke, Jun 18 '19 at 11:49
While the checkboxes show now, it's still impossible to check them. So when I tap the checkbox, nothing happens — Splekke, Jun 18 '19 at 11:58
I had to change your react native components to some divs https://repl.it/repls/StaticNeedyWebpages — Majid Parvin, Jun 18 '19 at 12:09
Still the same problem, after clicking the checkbox, the checkbox won't check — Splekke, Jun 24 '19 at 10:37
Note that also your code has some errors in terms of brackets — Splekke, Jun 24 '19 at 13:31

score 1 · Answer 2 · answered Jul 28 '20 at 08:37

I had a similar issue, after resolving the issue I am writing my answer here.

Consider the example below - (with hooks)

const checkboxComponent = () => {

  const [checkboxValue, setCheckboxValue] = React.useState([
   { label: 'Customer', value: 'customer', checked: false },
   { label: 'Merchant', value: 'merchant', checked: false },
   { label: 'None', value: 'none', checked: false },
 ])

 const checkboxHandler = (value, index) => {
   const newValue = checkboxValue.map((checkbox, i) => {
    if (i !== index)
      return {
        ...checkbox,
        checked: false,
      }
    if (i === index) {
      const item = {
        ...checkbox,
        checked: !checkbox.checked,
      }
      return item
    }
   return checkbox
 })
 setCheckboxValue(newValue)
 }    

return (
   <View>
    {checkboxValue.map((checkbox, i) => (
        <View style={styles.checkboxContainer} key={i}>
          <CheckBox
            value={checkbox.checked}
            onValueChange={(value) => checkboxHandler(value, i)}
          />
          <Text style={styles.label}>{checkbox.label}</Text>
        </View>
      ))}

   </View>
 )
}
export default checkboxComponent

ravibagul91 · Answer 3 · 2019-06-18T11:40:53.767

0

The problem is here,

checked={this.state.checked}

When you set checked to true, every checkbox is getting checked as you are using this value to this.state.checked in every checkbox.

Remove the checked and onPress from all the checkboxes and if you want to get the value of checked checkbox then you can use ref.

For your reference:: Get the value of checkbox using ref in React

edited Jun 18 '19 at 11:40

answered Jun 18 '19 at 11:27

ravibagul91

20,072
5
36
59

While this helps me a little bit, when removing "checked" and "onPress", the checkboxes wont check on click – Splekke Jun 18 '19 at 11:46
@Splekke refer the reference link for that issue. – ravibagul91 Jun 18 '19 at 11:48

How to only select one checkbox in a React Native Android app?

3 Answers3