REACT - toggle class onclick

Question

I am trying to figure out how to toggle an active class onClick to change CSS properties   I have taken many approaches  and read many SO answers  Using jquery it would be relatively simple   however  I cannot figure out to do this with react  My code is below  Can anyone advise how I should do this   Without creating a new component for each item is it possible to do this   class Test extends Component         constructor props         super props       this addActiveClass  this addActiveClass bind this           addActiveClass            not sure what to do here           render          lt div gt         lt div onClick  this addActiveClass  gt           lt p gt 1 lt  p gt         lt  div gt         lt div onClick  this addActiveClass  gt           lt p gt 2 lt  p gt         lt  div gt           lt div onClick  this addActiveClass  gt           lt p gt 3 lt  p gt         lt  div gt       lt  div gt

User · Answer

using React you can add toggle class to any id/element, try

style.css

.hide-text{
    display: none !important;
    /* transition: 2s all ease-in 0.9s; */
  }
.left-menu-main-link{
    transition: all ease-in 0.4s;
}
.leftbar-open{
    width: 240px;
    min-width: 240px;
    /* transition: all ease-in 0.4s; */
}
.leftbar-close{
    width: 88px;
    min-width:88px;
    transition: all ease-in 0.4s;
}

fileName.js

......
    ToggleMenu=()=>{
             this.setState({
                isActive: !this.state.isActive
              })
              console.log(this.state.isActive)
        }
        render() {
            return (
                <div className={this.state.isActive===true ? "left-panel leftbar-open" : "left-panel leftbar-close"} id="leftPanel">
                    <div className="top-logo-container"  onClick={this.ToggleMenu}>
                            <span className={this.state.isActive===true ? "left-menu-main-link hide-from-menu" : "hide-text"}>Welcome!</span>
                    </div>

                    <div className="welcome-member">
                        <span className={this.state.isActive===true ? "left-menu-main-link hide-from-menu" : "hide-text"}>Welcome<br/>SDO Rizwan</span>
                    </div>
    )
    }
......

User · Answer

A good sample would help to understand things better   HTML   lt div id  root  gt   lt  div gt    CSS   box     display  block    width  200px    height  200px    background-color  gray    color  white    text-align  center    vertical-align  middle    cursor  pointer     box green     background-color  green       React code  class App extends React Component     constructor props        super props       this state    addClass  false        toggle         this setState  addClass   this state addClass          render         let boxClass     box        if this state addClass          boxClass push  green              return           lt div className  boxClass join       onClick  this toggle bind this   gt  this state addClass    Remove a class     Add a class  click the box    lt br   gt Read the tutorial  lt a href  http   www automationfuel com  target   blank  gt here lt  a gt   lt  div gt                      ReactDOM render  lt App   gt   document getElementById  root

User · Answer

Use state  Reacts docs are here   class MyComponent extends Component       constructor props            super props           this addActiveClass  this addActiveClass bind this           this state                 active  false                       toggleClass             const currentState   this state active          this setState   active   currentState                 render             return                lt div                  className  this state active    your className   null                   onClick  this toggleClass                gt                   lt p gt  this props text  lt  p gt               lt  div gt                   class Test extends Component       render             return                lt div gt                   lt MyComponent text   1     gt                   lt MyComponent text   2     gt               lt  div gt

User · Answer

React has a concept of components state  so if you want to Toggle  use setState    App js   import React from  react    import TestState from    components TestState    class App extends React Component     render         return          lt div className  quot App quot  gt           lt h1 gt React State Example lt  h1 gt           lt TestState  gt         lt  div gt                export default App     components TestState js   import React from  react    class TestState extends React Component        constructor                 super            this state                 message   Please subscribe               status   quot Subscribe quot                       changeMessage                 if  this state status      Subscribe                         this setState  message    Thank You For Scubscribing    status   Unsubscribe                      else                       this setState   message   Please subscribe   status   Subscribe                              render                 return                lt div gt                   lt h1 gt  this state message  lt  h1 gt           lt button onClick      gt  this changeMessage      gt  this state status  lt  button gt               lt  div gt                     export default TestState     Output

User · Answer

You can also do this with hooks  function MyComponent  props      const  isActive  setActive    useState false      const toggleClass        gt        setActive  isActive           return        lt div        className  isActive    your className   null         onClick  toggleClass        gt         lt p gt  props text  lt  p gt       lt  div gt

User · Answer

The above answers will work  but just in case you want a different approach  try classname  https   github com JedWatson classnames

User · Answer

Here is a code I came Up with    import React   Component  from  react   import    header css   export default class Header extends Component      state             active   false              toggleMenuSwitch        gt            this setState  state   gt               return                  active   state active                                     render               destructuring         const  active    this state           let className    toggle  sidebar            if active               className      active                      return               lt header className  header  gt                   lt div className  header  wrapper  gt                       lt div className  header  cell header  cell--logo opened  gt                           lt a href     className  logo  gt                               lt img src  https   www nrgcrm olezzek id lv images logo svg  alt     gt                           lt  a gt                           lt a href     className  className                             onClick   this toggleMenuSwitch                              data-toggle  sidebar  gt                               lt i gt  lt  i gt                           lt  a gt                       lt  div gt                       lt div className  header  cell  gt                        lt  div gt                   lt  div gt               lt  header gt

User · Answer

Thanks to  cssko for providing the correct answer  but if you tried it yourself you will realise it does not work  A suggestion has been made by  Matei Radu  but was rejected by  cssko  so the code remains unrunnable  it will throw error  Cannot read property bind of undefined    Below is the working correct answer   x000D   x000D  class MyComponent extends React Component     constructor props        super props       this addActiveClass   this addActiveClass bind this       this state           active  false               addActiveClass         const currentState   this state active      this setState         active   currentState                 render         return    lt        div className             this state active    your className    null               onClick             this addActiveClass          gt         lt        p  gt            this props text          lt   p gt   lt          div  gt               class Test extends React Component     render         return    lt        div  gt         lt        MyComponent text              Clicking this will toggle the opacity through css class                  gt   lt          div  gt                ReactDOM render   lt    Test    gt      document body    x000D   your className     opacity  0 3   x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 12 0 umd react production min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 12 0 umd react-dom production min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

I would prefer using   amp  amp   -operator on inline if-statement  In my opinnion it gives cleaner codebase this way   Generally you could be doing something like this  render    return     lt div gt       lt button className  this state active  amp  amp   active         onClick        gt  this setState  active   this state active     gt Click me lt  button gt     lt  div gt        Just keep in mind arrow function is ES6 feature and remember to set  this state active  value in class constructor      this state     active  false     or if you want to inject css in JSX you are able to do it this way   lt button style  this state active  amp  amp  style button   gt button lt  button gt    and you can declare style json variable  const style     button    background  red        remember using camelCase on JSX stylesheets

User · Answer

Well  your addActiveClass needs to know what was clicked  Something like this could work  notice that I ve added the information which divs are active as a state array  and that onClick now passes the information what was clicked as a parameter after which the state is accordingly updated - there are certainly smarter ways to do it  but you get the idea    class Test extends Component       constructor props        super props       this state    activeClasses   false  false  false        this addActiveClass  this addActiveClass bind this          addActiveClass index        const activeClasses       this state activeClasses slice 0  index    this state activeClasses index   this state activeClasses slice index   1   flat        this setState  activeClasses           render         const activeClasses   this state activeClasses slice        return          lt div gt           lt div className  activeClasses 0    active     inactive   onClick       gt  this addActiveClass 0   gt             lt p gt 0 lt  p gt           lt  div gt           lt div className  activeClasses 1    active     inactive   onClick       gt  this addActiveClass 1   gt             lt p gt 1 lt  p gt           lt  div gt             lt div  onClick       gt  this addActiveClass 2   gt             lt p gt 2 lt  p gt           lt  div gt         lt  div gt

User · Answer

You can simply access the element classList which received the click event using event target then by using toggle method on the classList object to add or remove the intended class  lt div onClick    target     gt  target classList toggle  active    gt                        lt  div gt   Equevelent  lt div onClick  e  gt  e target classList toggle  active    gt                        lt  div gt   OR by declaring a function that handle the click and does extra work function handleClick el            Do more stuff     el classList toggle  active        lt div onClick    target    gt  handleClick target   gt                        lt  div gt

User · Answer

React has a concept of components state  so if you want to switch it  do a setState   constructor props      super props      this addActiveClass  this addActiveClass bind this     this state         isActive  false        addActiveClass       this setState       isActive  true          In your component use this state isActive to render what you need   This gets more complicated when you want to set state in component 1 and use it in component 2  Just dig more into react unidirectional data flow and possibly redux that will help you handle it

User · Answer

I started learning React recently and wanted to build a tab just to see how far my knowledge has gone  I came across this and decided to implement something without redux  I kind of feel the answers don t reflect what op wants to achieve  He wants only one active component but the answers here will set all components active  I have given it a shot   Below is a tab file  import React    Component   from  react     class Tab extends Component        render            const tabClassName    col-xs-3 tab-bar           const activeTab   this props activeKey     this props keyNumber    active-tab    null          return                    lt div                      className       tabClassName    activeTab                        onClick      gt this props onClick this props keyNumber                    gt                      I am here                  lt  div gt                       export default Tab    The tabs file     import React    Component   from  react   import Tab from    tab    class Tabs extends Component        constructor props           super props            this state                 currentActiveKey  0              tabNumber  2                     this setActive   this setActive bind this           this setTabNumber   this setTabNumber bind this              setTabNumber number           this setState               tabNumber  number                        setActive  key           this setState               currentActiveKey  key                         render            let tabs               for let i   0  i  lt   this state tabNumber  i                 let tab    lt Tab key  i  keyNumber  i  onClick  this setActive  activeKey  this state currentActiveKey   gt               tabs push tab                     return                lt div className  row  gt                   tabs               lt  div gt                       export default Tabs    your index file     import React from  react   import ReactDOM from  react-dom   import Tabs from    components tabs     ReactDOM render       lt Tabs   gt      document querySelector   container       and the css   tab-bar       margin  10px 10px      border  1px solid grey      active-tab       border-top  1px solid red      This is a skeleton of something I want to improve on so increasing the tabNumber beyond 4 will break the css

User · Answer

you can add toggle class or toggle state on click  class Test extends Component      state     active false        toggleClass         console log this state active      this setState         active true                 render          lt div gt         lt div onClick  this toggleClass bind this   gt           lt p gt 1 lt  p gt         lt  div gt       lt  div gt

User · Answer

Just wanted to add my approach  Using hooks and context provider  Nav js function NavBar       const filterDispatch   useDispatchFilter     const  filter    useStateFilter     const activeRef   useRef null    const completeRef   useRef null    const cancelRef   useRef null     useEffect      gt        let activeClass           let completeClass           let cancelClass           if filter     ACTIVE ORDERS         activeClass  is-active       else if   filter     COMPLETE ORDERS          completeClass  is-active       else if filter     CANCEL ORDERS           cancelClass  is-active            activeRef current className   activeClass     completeRef current className   completeClass     cancelRef current className   cancelClass       filter      return        lt div className  quot tabs is-centered quot  gt         lt ul gt           lt li ref  activeRef  gt             lt button             className  quot button-base quot              onClick       gt  filterDispatch  type   FILTER ACTIVE                gt              Active            lt  button gt           lt  li gt            lt li ref  completeRef  gt             lt button             className  quot button-base quot              onClick       gt  filterDispatch  type   FILTER COMPLETE                gt              Complete            lt  button gt           lt  li gt           lt li ref  cancelRef  gt             lt button             className   button-base               onClick       gt  filterDispatch  type   FILTER CANCEL                gt              Cancel            lt  button gt           lt  li gt         lt  ul gt       lt  div gt         export default NavBar  filterContext js export const ACTIVE ORDERS        quot pending quot      quot assigned quot      quot pickup quot      quot warning quot      quot arrived quot     export const COMPLETE ORDERS     quot complete quot   export const CANCEL ORDERS     quot cancel quot    const FilterStateContext   createContext   const FilterDispatchContext   createContext    export const FilterProvider      children      gt      const  state  dispatch    useReducer FilterReducer    filter  ACTIVE ORDERS      return        lt FilterStateContext Provider value  state  gt         lt FilterDispatchContext Provider value  dispatch  gt           children         lt  FilterDispatchContext Provider gt       lt  FilterStateContext Provider gt        export const useStateFilter        gt      const context   useContext FilterStateContext    if  context     undefined        throw new Error  quot place useStateMap within FilterProvider quot         return context   export const useDispatchFilter        gt      const context   useContext FilterDispatchContext    if  context     undefined        throw new Error  quot place useDispatchMap within FilterProvider quot         return context     export const FilterReducer    state  action    gt      switch  action type        case  quot FILTER ACTIVE quot         return              state          filter  ACTIVE ORDERS              case  quot FILTER COMPLETE quot         return              state          filter  COMPLETE ORDERS              case  quot FILTER CANCEL quot         return              state          filter  CANCEL ORDERS                return state    Works fast  and replaces redux

[javascript] REACT - toggle class onclick

Examples related to javascript

Examples related to reactjs