CODEWITHSUNDEEP
javascriptreactjs
foxer bixer
foxer bixer

Reputation: 137

how correctly use ternary operator in react js?

I'm using React. I've just started recently and have some kind of knowledge gap in syntax of javascript. I don't know how to write correctly code in order to toggle element condition, from display: block to display: none. I'm trying to use ternary operator, but I don't know how to do it.

 toggleFilters = (e) => {
    this.state.showOn === true ? {e.style.display ? 'block' : 'none'}

    this.setState({
        showOn: !this.state.showOn,
    })
}

Upvotes: 4

Views: 10269

Answers (5)

learner
learner

Reputation: 234

Easier way to do it, is this. This says that your e.style.display is block if your shownOn is true else your e.style.display is false.

e.style.display = this.state.showOn ? 'block' : 'none'}

Upvotes: 3

cнŝdk
cнŝdk

Reputation: 32175

The line you wrote won't compile, the ternary operator you used is wrong in:

this.state.showOn === true ? {e.style.display ? 'block' : 'none'}

Because : is expected after the {} block, and another thing you are not doing any assignement there, it should be like this:

e.style.display = this.state.showOn ? 'block' : 'none';

Note:

Note that this.state.showOn === true can be shortened to this.state.showOn, as this.state.showOn means that it's not undefined and it's true.

Upvotes: 2

Khiem Tran
Khiem Tran

Reputation: 6169

In react, you have state to store properties of the component, in this case, showOn is a state.

Your render function reflect this state to the element. In this case, if state showOn is true, you show your element (aka: set display to block), if not, you hide your element (aka: set display to none)

When you handle event, you change this state. In order to do so, you set showOn = invert of current showOn

toggleFilter = (event) => { 
    this.setState ({
        showOn: !this.state.showOn
    })
}

In render function, you reflect this change to your element, now you can use ternary operator

render() {
    return (
        <div>
            <div style={({display: this.state.showOn ? 'block' : 'none'})}> 
                Show Me
            </div>
            <button onClick={toggleFilter}>Toggle Filter</button>
    )
}

Upvotes: 0

weirdpanda
weirdpanda

Reputation: 2626

A ternary operator is generally associated with assignment. For example, if we have the following code bit:

let a = 'foo';
let conditionA = false;

if ( conditionA ) {
    a = 'bar';
} else {
    a = 'baz';
}

You can imagine the ternary operator which will - sort of - implicitly return a value based on a condition. In this case, we need a to have a value of bar if conditionA is true, otherwise, baz. You can see that we're dealing with assignment here. The ternary way to do this would be:

...
a = ( conditionA ) ? 'bar' : 'baz';
...

In this case, however, you'd need conditionA to be defined previously.

The basic syntax for the ternary operation is:

variable = ( condition ) ? valueIfTrue : valueIfFalse;

In your specific case, you can go with something like:

e.style.display = ( this.state.showOn ) ? 'block' : 'none';

As you can extrapolate, we're following the syntax we mentioned.

Upvotes: 0

Pardha.Saradhi
Pardha.Saradhi

Reputation: 478

try this

{e.style.display  = this.state.showOn === true ? 'block' : 'none'}

or

{e.style.display  = this.state.showOn ? 'block' : 'none'}

Upvotes: 1

Related Questions