Toggle Class in React

Question

I'm using react for a project where I have a menu button.

<a ref="btn" href="#" className="btn-menu show-on-small"><i></i></a> 

And a Sidenav component like:

<Sidenav ref="menu" /> 

And I wrote the following code to toggle the menu:

class Header extends React.Component {      constructor(props){         super(props);         this.toggleSidenav = this.toggleSidenav.bind(this);     }      render() {         return (           <div className="header">             <i className="border hide-on-small-and-down"></i>             <div className="container">           <a ref="btn" href="#" className="btn-menu show-on-small"><i></i></a>           <Menu className="menu hide-on-small-and-down"/>           <Sidenav />         </div>           </div>         )     }      toggleSidenav() {         this.refs.btn.classList.toggle('btn-menu-open');     }      componentDidMount() {         this.refs.btn.addEventListener('click', this.toggleSidenav);     }      componentWillUnmount() {         this.refs.btn.removeEventListener('click', this.toggleSidenav);     } } 

The thing is that this.refs.sidenav is not a DOM element and I cant add a class on him.

Can someone explain me how to toggle class on the Sidenav component like I do on my button?

Answer 1

You have to use the component's State to update component parameters such as Class Name if you want React to render your DOM correctly and efficiently.

UPDATE: I updated the example to toggle the Sidemenu on a button click. This is not necessary, but you can see how it would work. You might need to use "this.state" vs. "this.props" as I have shown. I'm used to working with Redux components.

constructor(props){     super(props); }  getInitialState(){   return {"showHideSidenav":"hidden"}; }  render() {     return (         <div className="header">             <i className="border hide-on-small-and-down"></i>             <div className="container">                 <a ref="btn" onClick={this.toggleSidenav.bind(this)} href="#" className="btn-menu show-on-small"><i></i></a>                 <Menu className="menu hide-on-small-and-down"/>                 <Sidenav className={this.props.showHideSidenav}/>             </div>         </div>     ) }  toggleSidenav() {     var css = (this.props.showHideSidenav === "hidden") ? "show" : "hidden";     this.setState({"showHideSidenav":css}); } 

Now, when you toggle the state, the component will update and change the class name of the sidenav component. You can use CSS to show/hide the sidenav using the class names.

.hidden {    display:none; } .show{    display:block; } 

Answer 2

refs is not a DOM element. In order to find a DOM element, you need to use findDOMNode menthod first.

Do, this

var node = ReactDOM.findDOMNode(this.refs.btn); node.classList.toggle('btn-menu-open'); 

alternatively, you can use like this (almost actual code)

this.state.styleCondition = false;   <a ref="btn" href="#" className={styleCondition ? "btn-menu show-on-small" : ""}><i></i></a> 

you can then change styleCondition based on your state change conditions.