如何组织多个复选框？

Question

I want to organize multiple checkboxes. I decided to keep an array of ids of chosen boxes in state.And using method want to give them statuses "checked".

constructor(props) {
        super(props);
        this.state = {
            checkboxes: []
        }
    }

for(let i=0; i<checkboxData.length; i++) {
            checkboxes.push(
                <List.Item key = { checkboxData[i].id }>
                    <div className="ui checkbox">
                        <input type="radio"
                               id={checkboxData[i].id}
                               checked={ ()=>this.getCheckboxStatus(checkboxData[i].id)}
                               onChange = { this.setTag }
                        />
                            <label>{checkboxData[i].name}</label>
                    </div>
                    <List.Content floated="right" >
                        <Label>
                            0
                        </Label>
                    </List.Content>
                </List.Item>
            );
        }

getCheckboxStatus = checkBoxId => {
        let { checkboxes } =this.props;
        console.log('IDS', checkBoxId)
        if (checkboxes.length === 0) {
            return false;
        } else if (checkboxes.indexOf(checkBoxId)!==-1){
            return true;
        }

        return false;

    };

    setTag = e => {
        let { checkboxes } = this.state;
        if ( checkboxes.length === 0 ) {
            checkboxes.push( e.target.id );
        } else {
            if(checkboxes.indexOf(e.target.id)!==-1) {
                checkboxes.splice(checkboxes.indexOf(e.target.id),1);
            } else {
                checkboxes.push( e.target.id );
            }
        }
        this.setState({ checkboxes: checkboxes })
    }

React renders it and throws in console:

Warning: Invalid value for prop `checked` on <input> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM.

How I understand this is because I'm using method for checked attribute. How can I do same thing and not receive warning?

Answer 1

Your input type needs to be checkbox, not radio. You also need to reference state with your checked attribute.

 <input 
     type="checkbox"
     id={checkboxData[i].id}
     checked={this.state.checkBoxes[i]}
     onChange={this.setTag}
 />

This will set state with true or false depending on the state of the checkbox