0

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.

1
  • Your jsbin contains different code than your code here. Commented Oct 1, 2016 at 6:01

2 Answers 2

1

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

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

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

Comments

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>

2 Comments

I expect true and false from {this.state.checked} like in angular, but react will not show anything?
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)}.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.