Ternary operator on style with React Js Es 6

The ternary should be like below:

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

Remove quotemarks - it should work then (assuming isLoggedIn is a boolean-ish).

What you provide to style attribute should be an object. Since we write js code in jsx between curly braces, you ll insert an object there.

Remember, you need to camelCase all css props. ( font-size ==> fontSize )

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

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

Related