React Best Practices

Use Classnames Package while adding conditional classes

Use Classnames package while adding conditional classes

In react, when writing conditional classnames instead of using conditional if-else or ternary operator or switch statement we can use classnames package.

Instead of:

1var buttonClass;
2if(this.state.status === "success") {
3  buttonClass = "btn btn-success";
4} else if(this.state.status === "warning") {
5  buttonClass = "btn btn-warning";
6} else if(this.state.status === "info") {
7  buttonClass = "btn btn-info"
8}
9
10return <button className={buttonClass}>{this.state.status}</button>;

It can be written as:

1var buttonClass = classNames('btn',
2  { 'btn-success': this.state.status === 'success' },
3  { 'btn-warning': this.state.status === 'warning' },
4  { 'btn-info': this.state.status === 'info' }
5);
6
7return <button className={buttonClass}>{this.state.status}</button>;

classNames is a function which accepts any number of arguments which are either string or object or array of strings/objects.

If the argument is a string, the string is included. A string argument is same as a truthy key-value pair.

1classNames('active');  // 'active'
2// Is short for
3classNames({ 'active': true });   // 'active'

If the arguments are an object, only truthy keys are included and falsy keys are ignored.

1classNames({
2  'green': true,
3  'red'  : false,
4  'large': true,
5  'small': false
6});  // 'green large'

If the arguments are an array of strings/objects, arrays are flattened recursively and only strings and truthy keys are included.

1var classes = [
2  'active',
3  { 'green': true, 'red': false },
4  'enabled'
5];
6
7classNames('small', classes);   // 'small active green enabled'