Multiple checkbox in redux-form

Question

I would like to ask, here\'s the scenario. I have this multiple checkbox but my problem is whenever I tick one checkbox, all of the 4 checkboxes are selected. And also why is it

Answer 1

For people like me who are new to redux and react may find the original code mentioned here confusing. I modified and converted it to an ES6 class. I also Removed bootstrap, validation and made it easy to debug.

Here is the modified code

import React from 'react';

class CheckboxGroup extends React.Component {

    checkboxGroup() {
        let {label, required, options, input, meta} = this.props;

        return options.map((option, index) => {
            return (
            

                
                     {
                               const newValue = [...input.value];
                               if (event.target.checked) {
                                   newValue.push(option.name);
                               } else {
                                   newValue.splice(newValue.indexOf(option.name), 1);
                               }

                               return input.onChange(newValue);
                           }}/>
                    {option.name}
                
            
)
        });
    }

    render() {
        return (
            

                {this.checkboxGroup()}
            
        )
    }
}


export default CheckboxGroup;

Usage:

let optionsList = [{id: 1, name: 'Optoin1'}, {id: 2, name: 'Option 2'}, {id: 3, name: 'Option 3'}]