'Unable to get value onchange from reactstrap switch input

I have a reactstrap switch which should return true/ false onchange. Problem is I'm unable to get the value onchange. this is how im doing this

         <div className='form-switch'>
          <Input type='switch' defaultChecked={orginalChoice} id={1} 
            nChange={setUserSwitchChoice}
             />
           <Label className='form-check-label' for={''}>
            <span className='switch-icon-left'>
             <Check size={14} />
              </span>
            <span className='switch-icon-right'>
               <X size={14} />
              </span>
              </Label>
          </div>

when I check the setUserSwitchChoice on console it returns the data like this :

SyntheticBaseEvent {_reactName: 'onChange', _targetInst: null, type: 'change', nativeEvent: PointerEvent, target: input#1.form-check-input, …}
bubbles: true
cancelable: true
currentTarget: null
defaultPrevented: false
eventPhase: 3
isDefaultPrevented: ƒ functionThatReturnsFalse()
isPropagationStopped: ƒ functionThatReturnsFalse()
isTrusted: true
nativeEvent: PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
target: input#1.form-check-input
timeStamp: 553191.0999999996
type: "change"
_reactName: "onChange"
_targetInst: null
[[Prototype]]: Object

So please let me know how to get the correct value in boolean format like true, false.

onChange={(e) => setUserSwitchChoice(e) // also tried this but working
reactjsinputreactstrap


Solution 1:[1]

There are multiple ways to achieve it. But what I most like making a handler for that purpose. So, Make a handler to get the response onChange implementing the useState.

const [orginalChoice , setOrginalChoice ] = useState(orginalChoice) 
// handle accordingly as ur original state 
// originalChoice should be true or false.

Then, create a change handler like this:

const onChangeHandler = () => {
    if (orginalChoice === true) {
      setOrginalChoice(!orginalChoice) # that will reverse the true to false
    } else {
      setOrginalChoice(!orginalChoice) # that will reverse the false to true
    }
     // console.log(orginalChoice) // To check the data on console
  }

Finally, update the switch input code with submit handler like that

   <div className='form-switch'>
     <Input type='switch' defaultChecked={orginalChoice} id={1} 
       onChange={onChangeHandler}/>
      <Label className='form-check-label' for={''}>
        <span className='switch-icon-left'>
          <Check size={14} />
        </span>
        <span className='switch-icon-right'>
         <X size={14} />
         </span>
      </Label>
    </div>

Now this should return the value in bool. true / false

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions