How to add or remove multiple classes to a ReactJS Component?

Last Updated : 03 Oct, 2024

In react we offen need to add or remove multiple classes based on the state and props to update the content dynamically. It can be done with the help of template-literals, className property and by using external npm packages.

How to Add or Removed Classes in React?

To add or remove multiple classes to a React Component we will be using the bootstrap classes using CDN to show the dynamic updates. We will use the ES6 Template literals and the classname npm package to update the classes. Both these approaches are described below with example.

Table of Content

Using classnames package with bootstrap
Using ES6 Template Literals with Custom Classes

Steps to Create React Application

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: Install the Required Module

# via npm
npm install classnames 

# via Bower
bower install classnames

# via Yarn 
yarn add classnames

Project Structure:

The updated dependencies in the package.json file are

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "classnames": "^2.5.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
},

Approach 1: Using classnames package with bootstrap

We can use the classNames Method (A simple JavaScript utility for conditionally joining classNames together). The classNames function takes any number of arguments which can be a string or object.

Example: This example uses the classnames npm package to dynamically remove and add bootstrap classes to React component.

HTML

<!-- Filename - public/index.html -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link
			rel="stylesheet"
			href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
		/>
		<title>React App</title>
	</head>
	<body>
		<noscript>You need to enable JavaScript to run this app.</noscript>
		<div id="root"></div>
	</body>
</html>

JavaScript

// Filename: App.js

import React from "react";
import GFG from "./GFG";
const App = () => {
	return (
		<div>
			<GFG />
		</div>
	);
};

export default App;

JavaScript

// Filename: GFG.js

import React, { useState } from "react";
// Importing classNames
import classNames from "classnames";

const GFG = () => {
	// Using useState hook for managing the flag state
	const [flag, setFlag] = useState(true);

	// Function to toggle the flag state
	const handleUpdate = () => {
		setFlag(!flag);
	};

	// Using classNames to add and remove classes based on state
	const classes = classNames({
		btn: true,
		"btn-primary": flag === true,
		"btn-success": flag === false
	});

	return (
		<div>
			<button type="button" className={classes} onClick={handleUpdate}>
				Click to add and remove classes
			</button>
		</div>
	);
};

export default GFG;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output:

Approach 2: Using ES6 Template Literals with Custom Classes

We can use the ES6 template literals as given in below example.

Example: This example uses ES^ template literals with custom classes to add and remove muliple classes from react component.

CSS

/* Filename - App.css */

.appContainer {
	margin-left: 40%;
	margin-top: 50px;
}

.box1 {
	background-color: green;
	padding: 10px;
    color: white;
}

.box2 {
	background-color: yellow;
	padding: 10px;
  	color: black;
}

JavaScript

// Filename: App.js

import React, { useState } from "react";
import "./App.css";

const App = () => {
	// Using useState hook to manage the flag state
	const [flag, setFlag] = useState(true);

	// Function to toggle the flag state
	const handleUpdate = () => {
		setFlag(!flag);
	};

	return (
		<div className="appContainer">
			<button
				type="button"
				// Using ES6 template literals to toggle class names
				className={`btn ${flag ? "box1" : "box2"}`}
				onClick={handleUpdate}
			>
				Click to add and remove classes
			</button>
		</div>
	);
};

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project: