React Native checkbox element is not working

Question

I am using checkbox from react-native-elements. I am facing issue with checkbox checked value.

First I have to get data from database. I am getting preference array with two key and values such as:

name
Key

for an instance: {name:'Events', selected:'true'}

Now, I am retrieving name value from database and setting that name for my checkbox, it is working fine. I am having issue with checkbox checked button.

Here is my checkbox :

 <CheckBox
 key={index}
 name={x.name}
checked={this.state.checked}
checkedIcon={<Image source={require('../../assets/icons/checkmark.png')} style={{ height: 20, width: 20 }} />}
uncheckedIcon={<Image source={require('../../assets/icons/check-box.png')} style={{ height: 20, width: 20 }} />}
onPress={() => this.toggleCheckbox(x.name)}/>

Here is my toggleCheckbox method:

toggleCheckbox(name) {

    console.log("NAME===", name);

    const changeCheckbox = this.state.filterCategoryName.find((cb) => cb.name === name);
    changeCheckbox.selected = !changeCheckbox.selected;

    if (changeCheckbox.selected) {
        console.log("Checked  if ====", changeCheckbox.selected);
        this.setState({ checked: changeCheckbox.selected })
        console.log("State updating during true====", this.state.checked);
    }
    else {
        console.log("Checked else ====", changeCheckbox.selected);
        this.setState({ checked: changeCheckbox.selected })
        console.log("State updating during false===", this.state.checked);
    }

    const checkboxes = Object.assign({}, this.state.filterCategoryName, changeCheckbox);
    this.setState({ checkboxes });

}

When I select one checkbox at that time it will select all checkbox instead of single and when I uncheck single checkbox it will uncheck all checkbox.

I am not getting id from database only getting name and selected value so I used name in togglecheckmethod.

Guruparan Giritharan · Accepted Answer · 2020-07-27 10:15:46Z

2

You are having a common value to maintain checked, thats why everything is getting updated

You can do the following.

Assuming this is your data array : this.state.filterCategoryName

<CheckBox
 key={index}
 name={x.name}
checked={x.selected}
checkedIcon={<Image source={require('../../assets/icons/checkmark.png')} style={{ height: 20, width: 20 }} />}
uncheckedIcon={<Image source={require('../../assets/icons/check-box.png')} style={{ height: 20, width: 20 }} />}
onPress={() => this.toggleCheckbox(x.name)}/>

And you can update the array in state instead of the checked value

toggleCheckbox(name) {

    console.log("NAME===", name);
     
    const updatedArray= [...this.state.filterCategoryName];
    const changeCheckbox = updatedArray.find((cb) => cb.name === name);
    changeCheckbox.selected = !changeCheckbox.selected;

    this.setState({ filterCategoryName :updatedArray});

}

This will simply maintain everything in the same array.

edited Jul 27, 2020 at 10:15

answered Jul 27, 2020 at 8:47

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

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

6 Comments

Developer_99 Over a year ago

Thank you for your time, I tried with new list but const changeCheckbox = updatedArray.find((cb) => cb.name === name); console.log("ChangeCheckbox=====", changeCheckbox); this will return undefined @GuruparanGiritharan

Guruparan Giritharan Over a year ago

sorry should be const updatedArray= [...this.state.filterCategoryName];

Guruparan Giritharan Over a year ago

the filterCategoryName is your array that you use to map the checkboxes right ? or is it some other array ?

Developer_99 Over a year ago

Yes, exactly filterCategoryName is array and that is i am using for maping checkbox, Thank you so much for your time!!

Developer_99 Over a year ago

Now, i can access checkbox value but unable to achieve targeted response, still same issue all checkbox getting checked and unchecked, In your code, I think you are not managing state value , kindly look and revert please

|

Collectives™ on Stack Overflow

React Native checkbox element is not working

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related