CODEWITHSUNDEEP
javascriptreactjs
4cody
4cody

Reputation: 354

boolean is not recognized in jsx?

I have a multiple choice trivia game, I'm passing a boolean value of true or false to a custom data attribute .. 'correct' in the various answer components.

When the answer is clicked on I'm running a check to see if the correct attribute has a value of true or false.

Here is one of the answers

<Answer 
    onClick={this.answerClick}
    onMouseEnter={this.hoverEnter} 
    onMouseLeave={this.hoverLeave} 
    correct={this.state.correctAnswer.a1}>
    {this.state.answerSet.a1}
</Answer>

And here is the answer component itself

const answer = (props) => (
    <div         
        className={classes.Answer}
        onMouseEnter={props.onMouseEnter} 
        onMouseLeave={props.onMouseLeave}
        onClick={props.onClick}
        data-correct={props.correct}>
        {props.children}
    </div>
)

So, on click I check to see if the data-correct attribute has a true or false value.

answerClick(e) {
    console.log(e.target.dataset.correct)
    if(e.target.dataset.correct === true) {
        this.setState({ score: this.state.score +1, level: this.state.level +1})
        console.log('you have answered correctly')
    } else {
        this.setState({ level: this.state.level +1 })
        console.log('you have answered incorrectly')
    }
}

It only registers a false answer even when the correct one is selected. I know that data-correct contains the value of true, because of my console log of the 

console.log(e.target.dataset.correct)

Is there a jsx/react behavior taking place I'm not aware of? Why would this only default to the else when the value of data-correct is true? Any help would be great.

Upvotes: 2

Views: 266

Answers (1)

Alan Friedman
Alan Friedman

Reputation: 1610

DOM attributes are read as strings, not booleans.

if(e.target.dataset.correct === 'true') {...}

Upvotes: 3

Related Questions