How to toggle class to a div element in reactjs?

Question

i am new to reactjs and i am unable to toggle the class for div element on click event.

What i want to implement is below,

I have a div element created dynamically like below,

constructor(props) {
    super(props);
    this.element = document.createElement('div');
    this.element.className = 'div_class';
}

I add and remove the div element on component mount and unmount as below,

componentDidMount() {
    notifications_root.appendChild(this.element);
    ReactDOM.render(<SvgSome onClick={this.handle_dialog_close} width="36" 
    style={{position:'absolute',cursor: 'pointer', right: '250px', top: 
    '105px'}} />, this.element);
}

componentWillUnmount() {
    this.element.classList.remove('hidden');
    root.removeChild(this.element);
}

handle_dialog_close = () => {
    this.element.classList.add('hidden');
};

Also i add and remove class 'hidden' to div element on clicking the svg element. However it does hide the div element on clicking svg element but doesnt show up the div element again...I guess the div element class is set to hidden it doesnt showup. Can somebody help me know where the problem is. Below is the css code. Thanks.

.div_class {
    width:800px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    margin-top: 100px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    &.hidden {
        display: none;
    }
 }

Answer 1

One thing you could is create an variable (or array if you want more classes) and then add then conditionally.

Render(){
Const divClasses =[‘My-Div’, ‘Container’]

Return(
<div className=
{/*condition*\ && divClasses>
//content
</div>
)
}

So the class(es) will be the added based on a condition. Additionally you could add a handler to control the condition.

Answer 2

React is a declarative library. You don't need to create and remove DOM elements with it. You just declare them with jsx inside the render method. Check out some react tutorials to learn how to work with react.

You are looking for some solution like this:

<div className=`div_class ${this.state.hidden ? 'hidden' : ''}`>
  <svg onClick={() => this.setState({hidden: !this.state.hidden})}></svg>
</div>

Answer 3

What about using core javascript instead?

There is no point to use a library if it makes stuff harder!

 function toggleClass(id,classA,classB){ if (document.getElementById(id).classList[0] === classA){ document.getElementById(id).classList = classB } else { document.getElementById(id).classList = classA } } 

 .hidden {display:none} .show {display:block} #elem1 {background: blue; width:200px;height:200px;font-size:10rem;text-align:center} 

 <button onclick="toggleClass('elem1','show','hidden')">Hide/Show</button> <div id="elem1" class="show">☀</div>