Ternary style operator with React Js Es 6

Question

I am trying to add the following ternary operator to show my button if I am logged in and if I will not hide it. The following holds me in error.

<img src={this.state.photo} alt="" style="{isLoggedIn ? 'display:' : 'display:none'}" /> 

Answer 1

What you provide to the style attribute must be an object. Since we are writing js code in jsx between braces, you will insert an object there.

Remember that you need to camel all css details. (font-size ==> fontSize)

 <img src={this.state.photo} alt="" style={ isLoggedIn ? { display:'block'} : {display : 'none'} } /> 

or

 <img src={this.state.photo} alt="" style={ { display: isLoggedIn ? 'block' : 'none' } } /> 

Answer 2

The three should be as below:

 style={isLoggedIn ? display:'block' : display:'none'} 

Remove the quotation marks - then this should work (assuming that isLoggedIn is a logical isLoggedIn ).