Using CSS Classes in JSX

Declaring classes

It is much cleaner and nicer to use real CSS classes in JSX, just like we do in regular HTML, with the difference being that we declare classes by using className instead of class:

<div className="item">...</div>

React renders normal syntax with our HTML equivalent:

<div class="item">...</div>

It is also quite common to concatenate values in the className prop dynamically:

render() {
  let className = 'item';
  if (this.state.selectedItem === this.props.itemId) {
    className += '-item-selected';
  }
  return (
    <div className={className}>
    ...
    </div>
  );
}

In this example, the value for className is item in each case. If the selected item is the current item, it also gets the class item-item-selected. Let’s see this example in action.