toggle checkbox using react failed

Question

I'm picking up react. But often time I have no clue what's the error. Below code did not render properly, and in the console of jsbin it shows no error.

const App = React.createClass ({
  getInitialState() {
    return {checked: false}
  },
  handleCheck() {
     this.setState({checked: !this.state.checked})
  },
  render() {
      return(
    <div>
    <input type="checkbox" onChange={this.handleCheck} />
    <p>This box is {this.state.checked}</p>
    </div>
    )


  }
})

ReactDOM.render(<App />,document.getElementById('app-container'));

https://jsbin.com/dehafizaba/1/edit Need advise.

Your jsbin contains different code than your code here.

Felix Kling
– Felix Kling

2016-10-01 06:01:29 +00:00
Commented Oct 1, 2016 at 6:01 — Felix Kling
– Felix Kling, Commented Oct 1, 2016 at 6:01

Pranesh Ravi · Accepted Answer · 2016-10-01 06:10:58Z

1

Boolean's won't get printed in React. Use toString() to convert them into string.

Example: https://jsfiddle.net/Pranesh456/557ab8wa/1/

answered Oct 1, 2016 at 6:10

Pranesh Ravi

19.2k10 gold badges51 silver badges70 bronze badges

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

Comments

Felix Kling · Accepted Answer · 2016-10-01 06:04:34Z

0

It "works fine". The problem is that React doesn't show a string representation of the boolean value. If you output something else it works, e.g.:

<p>This box is {this.state.checked ? 'checked' : 'unchecked'}</p>

answered Oct 1, 2016 at 6:04

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

2 Comments

Maria Jane Over a year ago

I expect true and false from {this.state.checked} like in angular, but react will not show anything?

Felix Kling Over a year ago

I think the expression has to return something renderable, i.e. an element, string or number. A boolean value is arguable not something that is usually rendered. You can explicitly convert the value to a string: {String(this.state.checked)}.

Collectives™ on Stack Overflow

toggle checkbox using react failed

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related