Reactjs checkbox cannot be checked

Question

I have this code in Reactjs that display a label with a checkbox

import React, { Component, PropTypes } from 'react';


class Test extends Component {
  constructor() {
      super(...arguments);
  }

  checkboxClicked(e) {
      this.props.test.clicked = e.target.checked;
  }

  render() {
    return (
        <li>
            <label>

                <input type="checkbox" value={this.props.test.id} checked={this.props.test.clicked} onChange={this.checkboxClicked.bind(this)} />
                {this.props.test.text}

            </label>
        </li>
    );
  }
}

export default Test;

The checkbox and text is well displayed, but when I click on it, it refused to get checked. The value of this.props.test.clicked is changed but not the ui in the browser.

Can somebody tell me that I am missing?

The component is never rerendered because the state never changes. Use state, not props. — Andrew Li
– Andrew Li, Commented Oct 7, 2016 at 16:35
@AndrewL.It might not be the right way to do so, but in the parent components, I use the props value to find which checkbox was checked... In your method, how can I know which Test was checked? — Etienne
– Etienne, Commented Oct 7, 2016 at 16:36

Steeve Pitis · Accepted Answer · 2016-10-07 15:42:25Z

1

It's not recommended to change props. Try to use state instead.

import React, { Component, PropTypes } from 'react';


class Test extends Component {
  constructor() {
      super(...arguments);

      this.state = { checked: this.props.test.clicked };
  }

  checkboxClicked(e) {
      this.setState({checked : e.target.checked});
  }

  render() {
    return (
        <li>
            <label>

                <input type="checkbox" value={this.props.test.id} checked={this.state.checked} onChange={this.checkboxClicked.bind(this)} />
                {this.props.test.text}

            </label>
        </li>
    );
  }
}

export default Test;

answered Oct 7, 2016 at 15:42

Steeve Pitis

4,4631 gold badge24 silver badges25 bronze badges

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

2 Comments

Etienne Over a year ago

It might not be the right way to do so, but in the parent components, I use the props value to find which checkbox was checked... In your method, how can I know which Test was checked?

Steeve Pitis Over a year ago

Can you show me your parents components who need to test if those checkbox are checked ?

Collectives™ on Stack Overflow

Reactjs checkbox cannot be checked

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related