How to toggle boolean state of react component

Question

I d like to know how to toggle a boolean state of a react component  For instance    I have boolean state check in the constructor of my component   constructor props  context        super props  context       this state           check  false            I am trying to toggle the state each time my checkbox is clicked  using the this setState method     lt label gt  lt input type checkbox  value  check  onChange     e    gt  this setState  check   check value     gt  Checkbox  lt  label gt    Of course I get a Uncaught ReferenceError  check is not defined   So how can I achieve this    Many thanks in advance

User · Answer

Set  const  state  setState    useState 1   Toggle  setState state -1   Use  state  gt  0    on     off

User · Answer

Here s an example using hooks  requires React    16 8 0    x000D   x000D     import React    useState   from  react   x000D  const   useState     React  x000D   x000D  function App     x000D    const  checked  setChecked    useState false   x000D    const toggleChecked        gt  setChecked value   gt   value   x000D    return   x000D       lt input x000D        type  checkbox  x000D        checked  checked  x000D        onChange  toggleChecked  x000D        gt  x000D       x000D    x000D   x000D  const rootElement   document getElementById  root    x000D  ReactDOM render  lt App   gt   rootElement   x000D   lt script crossorigin src  https   unpkg com react 16 umd react development js  gt  lt  script gt  x000D   lt script crossorigin src  https   unpkg com react-dom 16 umd react-dom development js  gt  lt  script gt  x000D   x000D   lt div id  root  gt  lt div gt  x000D   x000D   x000D

User · Answer

You should use this state check instead of check value here   this setState  check   this state check     But anyway it is bad practice to do it this way  Much better to move it to separate method and don t write callbacks directly in markup

User · Answer

I found this the most simple when toggling boolean values  Simply put if the value is already true then it sets it to false and vice versa  Beware of undefined errors  make sure your property was defined before executing   this setState      propertyName  this propertyName    this propertyName

User · Answer

You could also use React s useState hook to declare local state for a function component  The initial state of the variable toggled has been passed as an argument to the method  useState   import   render   from  react-dom   import React from  react    type Props       text  string    onClick event  React MouseEvent lt HTMLButtonElement gt    void      export function HelloWorldButton props  Props      const  toggled  setToggled    React useState false      returns a stateful value  and a function to update it   return  lt button   onClick   event    gt        setToggled  toggled       props onClick event           gt  props text   toggled   toggled toString     lt  button gt       render  lt HelloWorldButton text  Hello World  onClick       gt  console log  clicked       gt   document getElementById  root       https   stackblitz com edit react-ts-qga3vc

User · Answer

Since nobody posted this  I am posting the correct answer  If your new state update depends on the previous state  always use the functional form of setState which accepts as argument a function that returns a new state  In your case  this setState prevState   gt       check   prevState check       See docs  Since this answer is becoming popular  adding the approach that should be used for React Hooks  v16 8    If you are using the useState hook  then use the following code  in case your new state depends on the previous state   const  check  setCheck    useState false          setCheck prevCheck   gt   prevCheck

User · Answer

I was landed in this page when I am searching to use toggle state in React component using Redux but I don t find here any approach using the same    So  I think it might help someone who was struggling to implement toggle state using Redux   My reducer file goes here  I get the initial state false by default   const INITIAL STATE     popup  false    export default  state   INITIAL STATE  action    gt        switch  action type            case  POPUP               return                      state                  popup  action value                        default              return state            return state       I change state on clicking the image  So  my img tag goes here with onClick function    lt img onClick  togglePopup  src  props currentUser image  className  avatar-image avatar-image--icon    gt    My Toggle Popup function goes below  which call Dispatcher   const togglePopup   ev   gt        ev preventDefault        props handlePopup  props popup        This call goes to below mapDispatchToProps function which reflects back the toggled state   const mapDispatchToProps   dispatch   gt         handlePopup  value   gt  dispatch   type   POPUP   value          Thank you

User · Answer

Try    lt label gt  lt input type checkbox  value  check  onChange     e    gt  this setState  check   this state check value     gt  Checkbox  lt  label gt    Using check   check value means it is looking for the check object  which you haven t declared   You need to specify that you want the opposite value of this state check

User · Answer

Use checked to get the value  During onChange  checked will be true and it will be a type of boolean    Hope this helps    x000D   x000D  class A extends React Component   x000D    constructor     x000D      super   x000D      this handleCheckBox   this handleCheckBox bind this  x000D      this state     x000D        checked  false x000D        x000D      x000D     x000D    handleCheckBox e    x000D      this setState   x000D        checked  e target checked x000D         x000D      x000D     x000D    render    x000D      return  lt input type  checkbox  onChange  this handleCheckBox  checked  this state checked    gt  x000D      x000D    x000D   x000D  ReactDOM render  lt A  gt   document getElementById  app    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt div id  app  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Depending on your context  this will allow you to update state given the mouseEnter function  Either way  by setting a state value to either true false you can update that state value given any function by setting it to the opposing value with  this state variable  state       hover  false    onMouseEnter        gt      this setState       hover   this state hover

[javascript] How to toggle boolean state of react component?

Examples related to javascript

Examples related to reactjs

Examples related to reactjs-flux