how correctly use ternary operator in react js?

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.

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'}

try this

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

or

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

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.

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>
    )
}