How to conditionally apply class names in React JS

In this tutorial, you will learn how you can add or remove classnames based on a truthy value.

There are two simple hacks to conditionally apply classnames to React components,

1. Using ternary operator(a?b:c),

2. Using a npm module called clsx

Getting started

For this tutorial, I am going to create a Message component, which has an isError props, depending on the isError boolean value I will add or remove .error css class.

1. Using ternary operator

import React from 'react';
import './message.css';

const Message = ({ isError }) => {
  return (
    <p className={isError ? 'error' : 'success'}>
      This is a message
    </p>
  );
}

export default Message;

If the isError props is true, .error class gets added to the p element otherwise, the .success class gets added.

In another example, I'll append multiple classes inside the className attribute of p

return (
  <p className={`bold-text ${isError ? 'error' : 'success'}`}>
    This is a message
  </p>
);

In the code above, I have used ES6 template literals to append conditional ternary operator inside the classname string.

2. Using a 3rd party library

I'm going to use clsx, a light weight library. Many open source projects like React Material UI uses it internally to conditionally apply classnames.

Let’s install clsx,

npm install --save clsx

Now, I am going to refactor the above Message component to use clsx instead of ternary operator

import React from 'react';
import './message.css';
import clsx from 'clsx';

const Message = ({ isError }) => {
  return (
    <p className={clsx({
        'success': !isError,
        'error': isError
        })
      }
    >
      This is a message
    </p>
  );
}

export default Message;

Now, let's create a complex classname using clsx

return (
  <p className={clsx('bold-text', {
    'success': !isError,
    'error': isError
  })}>
    This is a message
  </p>
);

// output
// <p class="bold-text error">This is a message</p>
// or
//<p class="bold-text success">This is a message</p>

Related Solutions

• How to loop through an array of objects in React in 2020

• How to build a React Login Form with Typescript and React hooks

• How to achieve conditional routing in React using react router dom

• How to get the pathname from the current URL in React