React native push with multiple key and value

Question

I have a group of checkboxes, whenever I select a checkbox I need to push an array of data, like { 'index':1, 'photo':'sample.png' } to state, and whenever I unselecting the checkbox, I need to remove it from the state. after I need to loop through the state to get index and photo to be used

handleSelection = async (media, index, isSelected) => {
    alert(index);
    if (isSelected == true) {
        this.state.mediaSelected.push(media.photo);
    } else {
     this.state.mediaSelected.splice(this.state.mediaSelected.indexOf(media.photo), 1);
    }
     console.warn(this.state.mediaSelected);
  }

this is working for single value without the key, is there any way to push it with key and value?

Aureo Beck · Accepted Answer · 2018-12-19 11:50:26Z

1

You should always update state with this.setState in your case would be something like this:

handleSelection = async (media, index, isSelected) => {
alert(index);
if (isSelected == true) {
    this.setState({
        mediaSelected: this.state.mediaSelected.push({
            index, 
            photo: media.photo 
    }) 
});
} else {
    this.setState({
        mediaSelected: this.state.mediaSelected.splice(this.state.mediaSelected.indexOf(media.photo), 1)
    });
}
console.warn(this.state.mediaSelected);

}

answered Dec 19, 2018 at 11:50

Aureo Beck

7995 silver badges6 bronze badges

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

2 Comments

Aureo Beck Over a year ago

Don't forget to add a value prop to your Checkbox component , this value should be dependent on your state, if you could paste your render function would help. Is it necessary to have an array? Wouldn't just a index and photo be enough for what you need? Then each checkbox would have a value and a handleSelection function, something like this: <Checkbox value={this.state.index === 0} onValueChange={() => this.handleSelection(0)}/> <Checkbox value={this.state.index === 1} onValueChange={() => this.handleSelection(1)}/>

Jothi Kannan Over a year ago

Actually it's kind of checkbox not exactly checkbox(custom checkbox like option)

Harish Soni · Accepted Answer · 2018-12-19 12:38:25Z

1

Try this: Sorry I am working as well as answering your question so it is taking time.

handleSelection = async (media, index, isSelected) => {
    let selectPhotosObj = this.state.selectPhotosObj || [];
    if (isSelected == true) {
        const data = { index, photo: media.photo };
        //this.state.selectedPhotoObj will be the container for your object.
        selectPhotosObj.push(data)
        //need to set the new Array of Object to the state.
        this.setState({ mediaSelected: media.photo, selectPhotosObj });
    } else {
        const removedPhoto = this.state.mediaSelected.filter(value => value !== media.photo);
        selectPhotosObj = this.state.selectedPhotosObj.filter(value => value.index !== index);
        this.setState({
            mediaSelected: removedPhoto,
            selectPhotosObj

        })
    }
    console.warn(selectPhotosObj);
}

edited Dec 19, 2018 at 12:38

answered Dec 19, 2018 at 11:30

Harish Soni

1,89414 silver badges28 bronze badges

1 Comment

Jothi Kannan Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

React native push with multiple key and value

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related