CODEWITHSUNDEEP
react-nativecheckboxreact-native-elements
Developer_99
Developer_99

Reputation: 155

React Native checkbox element is not working

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:

  1. name
  2. 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.

Upvotes: 0

Views: 1909

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

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.

Upvotes: 2

Related Questions