Toggle Class in React

by

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

More Related Contents:

  1. React: “this” is undefined inside a component function
  2. State not updating when using React state hook within setInterval
  3. “this” is undefined inside map function Reactjs
  4. What are these three dots in React doing?
  5. How can I communicate between related react components?
  6. React component initialize state from props
  7. Reactjs async rendering of components
  8. Calling setState in a loop only updates state 1 time
  9. How to make a shared state between two react components?
  10. React – Preventing Form Submission
  11. react useEffect comparing objects
  12. CSS pseudo elements in React
  13. React 18, useEffect is getting called two times on mount
  14. How to access custom attributes from event object in React?
  15. In reactJS, how to copy text to clipboard?
  16. Unexpected token < error in react router component
  17. Is there any other way to implement a “listening” function without an infinite while loop?
  18. Where should functions in function components go?
  19. How can I call parent method in a child React component?
  20. TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app
  21. How does JavaScript mechanism behind react hooks work?
  22. Webpack output is empty object
  23. Changing the layout of a component depending on Redux state
  24. React Js: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
  25. When should you NOT use React memo?
  26. Programmatically change Redux-Form Field value
  27. Update single value in item array | react redux
  28. How to include local javascript on a Gatsby page?
  29. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  30. State not getting updated when calling the related setState in React

Leave a Comment