vanilla javascript html css conditional add class code example

Example 1: conditional css class styling

class App extends Component {
  constructor() {
    super()
    this.state = { isRed: true }
  }

  render() {
    const isRed = this.state.isRed

    return <p className={isRed ? 'class1' : 'class2'}>Example Text</p>
  }
}

Example 2: conditional css class styling

// return class names from a function
getClass(someInput){
    switch(someInput){
        case '1': {
            return 'class1'
        }
        case '2': {
            return 'class2'
        }
        case '3': {
            return 'class3'
        }
    }
}

render() {
    return (
        <p className={this.getClass('1')}>
            Example Text
        </p>
    );
}