conditional render two jsx blocks code example

Example 1: react style ternary operator

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

// or

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

Example 2: how to change grid size with conditional expression in react

<Grid.Column width={ condition ? <column number if true> : <column number if false> } />
<Grid item xs={12} sm={isLogic ? 8 : 12}></Grid>