my check boxes are not getting checked, when created dynamically. I am not able to find the problem. Though, when I hard-code the values for check box id and label for, it just works.

var category_list = this.props.categories_list.map(function(name, i) {
        // debugger
        return (
            <div className="group-chkbx list-group-item">
                <input key={i+11} type="checkbox" id={name.category_id} name="category" />
                <label htmlFor={name.category_id}>{name.name}</label>
            </div>
        )
    });

my check boxes are not getting checked, when created dynamically. I am not able to find the problem. Though, when I hard-code the values for check box id and label for, it just works.

var category_list = this.props.categories_list.map(function(name, i) {
        // debugger
        return (
            <div className="group-chkbx list-group-item">
                <input key={i+11} type="checkbox" id={name.category_id} name="category" />
                <label htmlFor={name.category_id}>{name.name}</label>
            </div>
        )
    });

• javascript
• reactjs

Share Improve this question Follow edited Feb 15, 2017 at 9:12 Abhishek Dhanraj Shahdeo asked Feb 14, 2017 at 13:51 Abhishek Dhanraj ShahdeoAbhishek Dhanraj Shahdeo 1,35622 gold badges1414 silver badges3535 bronze badges 2

• Do you mean, that when you click on the checkbox it doesn't show the check mark? or that you are not able to get the value (checked/unchecked)? – Hosar Commented Feb 14, 2017 at 14:29
• Yes, it doesn't put the check mark on the check box – Abhishek Dhanraj Shahdeo Commented Feb 15, 2017 at 9:10

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

After a lot of research one of my colleague helped me out with a solution. The htmlFor and id must be same, but cannot be only numeric. The Ids that I'm using are purely numeric. When I added alphabet as a prefix, it just started working like charm. Thanks all for showing interest and helping out here.

There's nothing that would set the checked prop on them, anyway. When should they be checked?

(Also, remember that ponents in arrays (such as what .map returns) should have unique key props.)

If your checkboxes are not getting checked, most probably is that some other functionality is preventing it.
Here and example of how to get the checkbox values:

class WithChecks extends Component {
    constructor(props){
        super(props);
        this.getValue = this.getValue.bind(this);
    }
    getValue(e){
        const chk = e.target;
        console.log(chk.checked);
        console.log(chk.value);
    }

    render() {
        const arr = ['a', 'b', 'c', 'd'];
        return (
            <div>
                {
                    arr.map((value, index) => {
                        return (
                            <div key={index}>
                                <input type="checkbox" 
                                       id={'chk' + index} 
                                       onChange={this.getValue}
                                       name="category" 
                                       value={value} />
                                <label htmlFor={'chk' + index}>{value}</label>
                            </div>
                        );
                    })
                }
            </div>
        );
    }
}

Maybe this can help to clarify.

The checked property of the input will control whether it is checked. Usually I use local state (or something from global redux state to control what is checked). Little Example:

class Something extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: 0
        }

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        // Do Stuff
    }

    render() {
        return (
            <div>
                {
                    this.props.categories_list.map(function(name, i) {
                        return (
                            <div className="group-chkbx list-group-item" key={i}>
                                <input checked={i === this.state.checked} onChange={this.handleChange} type="checkbox" id={name.category_id} name="category" />
                                <label htmlFor={name.category_id}>{name.name}</label>
                            </div>
                        )
                    });
                }
            </div>
        );
    }
}