Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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

  • Last Updated : 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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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
    <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




My Personal Notes arrow_drop_up
Recommended Articles
Page :