condition in react style code example
Example 1: conditional style react
class App extends Component {
constructor() {
super()
this.state = { isRed: true }
}
render() {
const isRed = this.state.isRed
return <p style={{ color: isRed ? 'red' : 'blue' }}>Example Text</p>
}
}
Example 2: react style ternary operator
<img
src={this.state.photo}
alt=""
style={ isLoggedIn ? { display:'block'} : {display : 'none'} }
/>
<img
src={this.state.photo}
alt=""
style={ { display: isLoggedIn ? 'block' : 'none' } }
/>
Example 3: conditional style prop react
style={{ textDecoration: todo.completed && "line-through" }}
style={{ textDecoration: todo.completed ? "line-through" : 'none' }}
Example 4: conditional style react
<ImageBackground source={Images.bg} style={ (navHeight==0) ? styles.bg1 : styles.bg2}>