Toggle variable upon onClick in JSX

Question

I have a default state in my constructor

this.state {
    showModal:false
}

then how can I toggle the value without declaring a function, but straight away do that in JSX? I found it's too much of code to do it in a function. Can't it be more simple just do it like

render(){
    return(<div onClick={()=>this.setState({showModal:!showModal})}></div>)
}

But I got error of syntax error in my JSX above. Why?

@bejado won't work too

Jessica Robertson
– Jessica Robertson

2017-02-12 05:29:16 +00:00
Commented Feb 12, 2017 at 5:29 — Jessica Robertson
– Jessica Robertson, Commented Feb 12, 2017 at 5:29
What error are you getting?

bejado
– bejado

2017-02-12 05:33:46 +00:00
Commented Feb 12, 2017 at 5:33 — bejado
– bejado, Commented Feb 12, 2017 at 5:33

bejado · Accepted Answer · 2017-02-12 05:43:32Z

2

Remember, React state is maintained in the this.state property, thus you need to reference this.state.showModal, not this.showModal.

The correct way to do this:

<div onClick={() =>
    this.setState({showModal: !this.state.showModal})}>
</div>

As for doing this only using JSX (without declaring a function), that isn't possible. JSX is JavaScript.

edited Feb 12, 2017 at 5:43

answered Feb 12, 2017 at 5:38

bejado

1,45812 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Toggle variable upon onClick in JSX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related