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

0 0 2 minutes read

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!