CODEWITHSUNDEEP
javascriptreactjscheckbox
Etienne
Etienne

Reputation: 165

Reactjs checkbox cannot be checked

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?

Upvotes: 1

Views: 662

Answers (1)

Steeve Pitis
Steeve Pitis

Reputation: 4453

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;

Upvotes: 1

Related Questions