Toggle Class in React

Question

I m using react for a project where I have a menu button    lt a ref  btn  href     className  btn-menu show-on-small  gt  lt i gt  lt  i gt  lt  a gt    And a Sidenav component like    lt Sidenav ref  menu    gt    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              lt div className  header  gt               lt i className  border hide-on-small-and-down  gt  lt  i gt               lt div className  container  gt             lt a ref  btn  href     className  btn-menu show-on-small  gt  lt i gt  lt  i gt  lt  a gt             lt Menu className  menu hide-on-small-and-down   gt             lt Sidenav   gt           lt  div gt             lt  div gt                       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

User · Answer

For anybody reading this in 2019  after React 16 8 was released  take a look at the React Hooks  It really simplifies handling states in components  The docs are very well written with an example of exactly what you need

User · 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            lt div className  header  gt               lt i className  border hide-on-small-and-down  gt  lt  i gt               lt div className  container  gt                   lt a ref  btn  onClick  this toggleSidenav bind this   href     className  btn-menu show-on-small  gt  lt i gt  lt  i gt  lt  a gt                   lt Menu className  menu hide-on-small-and-down   gt                   lt Sidenav className  this props showHideSidenav   gt               lt  div gt           lt  div gt           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

User · Answer

Toggle function in react  At first you should create constructor like this  constructor props            super props           this state                 close  true                     Then create a function like this  yourFunction        gt            this setState               close   this state close                       then use this like  render             const  close    this state          return                 lt Fragment gt                     lt div onClick       gt  this yourFunction    gt  lt  div gt                     lt div className  close    isYourDefaultClass     isYourOnChangeClass   gt  lt  div gt                lt  Fragment gt                      Please give better solutions

User · Answer

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     lt a ref  btn  href     className  styleCondition    btn-menu show-on-small        gt  lt i gt  lt  i gt  lt  a gt    you can then change styleCondition based on your state change conditions

User · Answer

Ori Drori s comment is correct  you aren t doing this the  React Way   In React  you should ideally not be changing classes and event handlers using the DOM  Do it in the render   method of your React components  in this case that would be the sideNav and your Header  A rough example of how this would be done in your code is as follows    HEADER  class Header extends React Component   constructor props       super props      render         return            lt div className  header  gt               lt i className  border hide-on-small-and-down  gt  lt  i gt               lt div className  container  gt                   lt a ref  btn  href     className  btn-menu show-on-small                  onClick this showNav gt  lt i gt  lt  i gt  lt  a gt                   lt Menu className  menu hide-on-small-and-down   gt                   lt Sidenav ref  sideNav   gt               lt  div gt           lt  div gt           showNav       this refs sideNav show          SIDENAV   class SideNav extends React Component      constructor props         super props        this state            open  false                 render          if  this state open           return              lt div className    sideNav  gt              This is a sidenav            lt  div gt                  else          return null                   show          this setState          open  true                   You can see here that we are not toggling classes but using the state of the components to render the SideNav  This way  or similar is the whole premise of using react  If you are using bootstrap  there is a library which integrates bootstrap elements with the react way of doing things  allowing you to use the same elements but set state on them instead of directly manipulating the DOM  It can be found here - https   react-bootstrap github io   Hope this helps  and enjoy using React

[javascript] Toggle Class in React

Examples related to javascript

Examples related to reactjs