Question

51

Toggle Class in React

rated 0 times [ 58] [ 7] / answers: 1 / hits: 138827 / 8 Years ago, mon, april 4, 2016, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mariamiyanab

Add To Favorites

Follow

Total Points: 75

Total Questions: 102

Total Answers: 92

Location: British Indian Ocean Territory

Member since Tue, Feb 22, 2022

2 Years ago

answered 8 Years ago mustafaericho · Accepted Answer

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;

}