Add/Remove class to parent DOM element React js

Question

I want to add/remove class from parent DOM element while click on add/remove button like if i click on add class button then it add new class name "clicked" to parent div and remove that class when click on remove class button:

index.html

<div class="main-div">

  <div class="second-div" id="config">
  </div>

</div>

config.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Main from 'Main';

ReactDOM.render(
    <Main/>,
    document.getElementById('config')
);

Main.jsx

import ReactDOM from 'react-dom'
import React from "react";
import createReactClass from "create-react-class";


export default createReactClass({
    getInitialState() {
        return {
            show-main-div: false
    };
    },

    addClass() {
    // want to add new class on parent DOM element i.e <div class="main-div">
    },

    render: function () {
        return (
            <div>
                <button className="add-class" onClick={() => {this.addClass()}}>
                    Add Class
                </button>
        <button className="remove-class" onClick={() => {this.removeClass()}}>
                    Remove Class
                </button>
            </div>
        );
    }
});

State should propagate down, not up. Perhaps you could handle events in the parent as well and pass that state down as a prop — scrowler
– scrowler, Commented Sep 17, 2018 at 9:05
@Robbie Averill can you explain a bit more or give me example code as i am new to react thanks. — Hassan Shahbaz
– Hassan Shahbaz, Commented Sep 17, 2018 at 9:08
Lightweight example: jsfiddle.net/8en4vdbz Ramya's answer sums it up, but assumes you have access to the div in the current component — scrowler
– scrowler, Commented Sep 17, 2018 at 9:21

Bhojendra Rauniyar · Accepted Answer · 2018-09-17 09:09:55Z

14

Assign a ref and add/remove the required class:

addClass() {
    this.divRef.current.classList.add('main-div')
},
removeClass() {
   this.divRef.current.classList.remove('main-div')
}

    render: function () {
        return (
            <div ref={this.divRef}>
                <button className="add-class" onClick={() => {this.addClass()}}>
                    Add Class
                </button>
        <button className="remove-class" onClick={() => {this.removeClass()}}>
                    Remove Class
                </button>
            </div>
        );
    }

// note: you have to create a ref inside the constructor:
this.divRef = React.createRef()

answered Sep 17, 2018 at 9:09

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ramya · Accepted Answer · 2018-09-17 09:20:49Z

4

I'd suggest you do the below:

import ReactDOM from 'react-dom'
import React from "react";
import createReactClass from "create-react-class";


export default createReactClass({
    getInitialState() {
        return {
            main_div_class: "some_initial_class"
    };
    },

    addClass() {
        // append the class you want to add to this.state.main_div_class
        this.setState({main_div_class: new_value_with_added_class})
    },

    removeClass() {
        // remove the class you want to add from this.state.main_div_class
        this.setState({main_div_class: new_value_with_removed_class})
    }

    render: function () {
        return (
            <div className={this.state.main_div_class}>
                <button className="add-class" onClick={() => {this.addClass()}}>
                    Add Class
                </button>
        <button className="remove-class" onClick={() => {this.removeClass()}}>
                    Remove Class
                </button>
            </div>
        );
    }
});

I agree with Bhojendra's answer but it is always better to use states than refs. See here

edited Sep 17, 2018 at 9:20

answered Sep 17, 2018 at 9:14

Ramya

15011 bronze badges

1 Comment

Daniel Smith Over a year ago

please look this and answer stackoverflow.com/q/58040667/2479903

Hema Ramasamy · Accepted Answer · 2020-07-25 03:38:18Z

3

you can add and remove the classes to particular div (onClick). If you have to set and remove the state like button, its better to go with setState

addClass(e) {
                e.target.classList.add('yourclass');

}
removeClass(e){
                   e.target.classList.remove('yourclass');

 }

render: function () {
    return (
        <div>
            <button className="add-class" onClick={() => {this.addClass()}}>
                Add Class
            </button>
    <button className="remove-class" onClick={() => {this.removeClass()}}>
                Remove Class
            </button>
        </div>
    );
}
});

answered Jul 25, 2020 at 3:38

Hema Ramasamy

7462 gold badges8 silver badges19 bronze badges

Comments

Ayush Verma · Accepted Answer · 2021-06-16 17:46:49Z

Writing the above answer but with useRef and setTimeout to add/remove classses based on specific interval

import React,{useRef} from 'react';

export default some fucntion  ... {

Note: You have to first define your useRef.

const node = useRef(""); // this is your initial value of ref

// this is called when the div is clicked
const handingRef = ()=>{ 

   let timeout = null;

  
   // to add class, you can do
    node.current.classList.add("name of the class");
   
    // to remove the class, you can do
    node.current.classList.remove("name of the class");

    // to clear setInterval

    if(timeout){
      clearTimeout(timeout)
      timeout=null;
     }

   // if you want to remove a class after some time

    setTimeout(()=>{
      node.current.classList.remove('Section1-row1-shopClosed')
    
     },time in milli-second)

}

return(){
  <div>
  ...
     <div ref={node} onClick={handingRef}> {content ... } </div>

 </div>
 }

}

gokul-r-16 · Accepted Answer · 2020-10-24 03:53:10Z

1

You can view the targeted class form BOM elements and remove the class form the classlist like event.target.classList.remove('the class name which you want to remove')

answered Oct 24, 2020 at 3:53

gokul-r-16

214 bronze badges

Comments

Mostafa Mohammadzadeh · Accepted Answer · 2022-11-09 08:23:53Z

0

<div className="myDiv">
    <input type="button"
        onClick={(e)=>e.target.parentNode.classList.add('open')}>
    </input>
</div>

answered Nov 9, 2022 at 8:23

Mostafa Mohammadzadeh

92112 silver badges8 bronze badges

1 Comment

Rohit Gupta Over a year ago

Its best to explain your answer

Collectives™ on Stack Overflow

Add/Remove class to parent DOM element React js

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related