ReactJs: map state data to checkboxes

Question

I am trying to render a grid of checkboxes. I can check a checkbox and fire off the handler which updates an array of values.

My problem is when I browse back to the page I would like to see checkboxes with the value in an array checked as default.

Can anyone please tell me how do this? Many thanks

handler: function(e) {

    channel.publish({
        channel: "contact",
        topic: "selectedContact",
        data: {
            id: e.target.attributes['data-ref'].value
        }
    });
},

render: function() {

    var id = this.props.data.id;
    var isSelected = this.props.data.isSelected;

    return (
        <div className="contact-selector">
            <input type="checkbox"
                checked={isSelected} data-ref={id}
                onClick={this.handler} />
        </div>
    );
},

I have my selected state being passed as props:

props: Object data: Object contacts: Array[10] 0: Object Id: 13211, isSelected: true

I have a screenshot of the state which holds the isSelected value, but I cant find out how to get that value in the checked property of the component? Do I need to map it somehow?

enter image description here

My initial value is:

this.props.data.isSelected

But the isSelected value is written to the contacts array in the attachment

Hannes Johansson · Accepted Answer · 2015-07-07 09:40:16Z

2

You need to make the checkbox a so-called controlled component. In short, if you only assigned it the value of some prop (this.props), the actual checkbox value would not be able to change, until the component is re-mounted, because the property would never change except when the component is re-mounted with new properties. So you need to add an onChange handler and update the component's state whenever it is clicked, so that the component will re-render with the new state. Something like this:

getInitialState: function() {
    return {isSelected: this.props.data.isSelected};
},
handleChange: function(e) {
    var selected = !this.state.isSelected;
    this.setState({isSelected: selected});
},
render: function() {

    var id = this.props.data.id;
    var isSelected = this.state.isSelected;

    return (
        <div className="contact-selector">
            <input type="checkbox"
                checked={isSelected} 
                data-ref={id}
                onClick={this.handler}
                onChange={this.handleChange}
            />
        </div>
    );
}

edited Jul 7, 2015 at 9:40

answered Jul 7, 2015 at 9:35

Hannes Johansson

1,8022 gold badges16 silver badges28 bronze badges

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

8 Comments

Bomber Over a year ago

Thanks for the reply, I am passing the selected state as props, would I be able to map the data to the chekboxes that way? Instead of a seperate state for each componenet?

Hannes Johansson Over a year ago

Yes if you pass the selected state as a property, you can use that as an initial value so that the checkbox is checked when you first mount the component. But if you only did that, the checkbox would not be able to change its state when the user clicks it, because the prop would still be the same (props don't change). So you would also need to have the internal state for the component so it can be updated and re-rendered when the user clicks the checkbox. That's called a "controlled component" in React, as described on the page I linked.

Bomber Over a year ago

Thanks again, I have the value in state, but can't find out how to access that from my component? Attached image too

Hannes Johansson Over a year ago

Do you want to render one checkbox for each contact? In that case I suggest creating a new component, moving the onChange handler and isSelected state there, then in a parent component loop over each contact in this.props.data.contacts and pass that as props. Maybe you should add that as a separate question on Stackoverflow if that is unclear because that doesn't really concern handling the checkbox state or initial value.

Hannes Johansson Over a year ago

Your "state" is actually a property that you have passed when you rendered your component. It's accessible in this.props.data.contacts[0].isSelected. Since contacts is an array you probably want to render one checkbox for each contact.

|

Collectives™ on Stack Overflow

ReactJs: map state data to checkboxes

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related