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

28 Dec, 2020
There are the following approaches to add or remove multiple classes to a ReactJS Component:
Approach 1: 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.
The argument ‘row’ is short for {row: true}. If the value associated with a given key is falsy, that key won’t be included in the output. The row and col are the names of classes in the following example.
classNames('row', 'col'); // => 'row col'
classNames('row', { col: true }); // => 'row col'
classNames({ 'row-col': true }); // => 'row-col'
classNames({ 'row-col': false }); // => ''
classNames({ row: true }, { col: true }); // => 'row col'
classNames({ row: true, col: true }); // => 'row col'
Module Installation:
We have to install dependency to use the classNames function, and we will be using bootstrap classes.
# via npm
npm install classnames 

# via Bower
bower install classnames

# via Yarn 
yarn add classnames
Filename: App.js
Javascript
import React, { Component } from "react";// Importing classNames import classNames from 'classnames'class GFG extends Component {  state = {    flag : true  }      handleUpdate = () => {    this.setState({flag: !this.state.flag})}    render() {   // Using classNames to add and remove   // Classes based on state     var classes = classNames( {      'btn': true,      'btn-primary': this.state.flag === true,      'btn-success':this.state.flag===false    })              return (            <div>               <button type="button"                className= { classes}               onClick = {this.handleUpdate}>              Click to add and remove classes                 </button>              </div>        );  }}export default GFG;
File path: public/index.html 
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>
File path: src/Component/App.js
Javascript
import React from 'react'import GFG from './GFG'const App  = () => {      return <div>        <GFG />    </div>}  export default App;
File path: src/index.js
Javascript
import React, { Component } from 'react';import   ReactDOM  from 'react-dom';import App from './components/App'  ReactDOM.render(<App/> , document.querySelector('#root'))
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Approach 2: We can use the ES6 template literals.
Filename: App.js
Javascript
import React, { Component } from "react";import './App.css'class App extends Component {    state = {    flag: true  }    handleUpdate = () => {    this.setState({ flag: !this.state.flag })  }    render() {    return (      <div className="appContainer" >        <button type="button"          // Using es6 backticks syntax(template literal)          className={`btn ${this.state.flag ? 'box1' : 'box2'}`}          onClick={this.handleUpdate}>          Click to add and remove classes         </button>      </div>    );  }}  export default App;
Filename: App.css
css
.appContainer{  margin-left: 40%;  margin-top: 50px;}  .box1{  background-color: green;  padding: 10px;}  .box2{  background-color: yellow;  padding: 10px;}
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: 
Before button click
Now after clicking on the button, the following will be the output:After button click
Now after clicking on the button, the following will be the output:
After button click
Picked
react-js
JavaScript
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
JavaScript String includes() Method
Implementation of LinkedList in Javascript
DOM (Document Object Model)
How to get values from html input array using JavaScript ?
Lodash | _.cloneDeep() Method
Difference Between PUT and PATCH Request
JavaScript | Promises
Binary Search In JavaScript