Creating a checkbox group with React Native

Question

Good Morning! I am wanting to create a selection box where the user has several options of items to choose from and when clicking on a button, it triggers a function that shows all the values that the user chose in the form of an array, json or even arrays ( hard task).

In the React Native documentation, only simple examples of checkboxes using the component are provided and I wanted to go much further than the documentation provides me. What are the possible solutions to this problem? (from a simpler example to an advanced one) and what (s) ways can I explore this problem in order to solve it in the most practical and uncomplicated way?

Definitions and examples of official documentation:
https://reactnative.dev/docs/checkbox/ (CheckBox)
https://reactnative.dev/docs/button/ (Button)

With this problem, another one came up: build an application where the user selects shopping options (items) and a subtotal is displayed in the lower corner of the application as he selects or deselects the items he is going to buy, and there is also an option to reset the subtotal by returning it to the zero value.

From the problem mentioned at the beginning, what are the possible solutions to create this application previously mentioned in a practical and simple way?

grreeenn · Accepted Answer · 2024-04-01 20:08:31Z

6

Multi Checkbox example ( Updated with Hook )

export const Example = () => {
      
  const [checkboxes, setCheckboxes] = useState([{
      id: 1,
      title: 'one',
      checked: false,
    }, {
      id: 2,
      title: 'two',
      checked: false,
    }]);


  const onButtonPress = () => {

    const selectedCheckBoxes = checkboxes.find((cb) => cb.checked === true);
    // selectedCheckBoxes will have checboxes which are selected
  }


  const toggleCheckbox = (id, index) => {

    const checkboxData = [...checkboxes];
    checkboxData[index].checked = !checkboxData[index].checked;
    setCheckboxes(checkboxData);
  }

  render(){
    const checBoxesView = checkboxes.map((cb, index) => {
        return (
          <View style={{flexDirection:"row"}}> 
            <Checkbox
              key={cb.id}
              checked={cb.checked}
              onPress={() => toggleCheckbox(cb.id, index)} />
            <Text>{cb.title}</Text>
          </View>
        );
    });

    return (
      <View>
       { checBoxesView }
       <Button onPress={onButtonPress} title="Click" />
    </View>
   );
  }    
}

edited Apr 1, 2024 at 20:08

grreeenn

2,6031 gold badge25 silver badges35 bronze badges

answered Oct 31, 2020 at 5:20

Nooruddin Lakhani

6,8513 gold badges22 silver badges43 bronze badges

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

4 Comments

pe.Math Over a year ago

I really liked the example above, but how would this code look if the class were a component (React Hooks)???

pe.Math Over a year ago

Your code appeared here the following result: i.sstatic.net/pp52K.png

pe.Math Over a year ago

Unexpected token, expected ";" (32:11)

pe.Math Over a year ago

30 | 31 | > 32 | render (){ | ^ 33 | return ( 34 | <View> 35 | { checkboxes.map((cb, index) => {

Collectives™ on Stack Overflow

Creating a checkbox group with React Native

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related