-1

I'm busy working through this tutorial on React + Redux and I was wondering what the !! was for when setting the checked property of the checkbox. 

render() {
const onClick = () => store.dispatch({type: 'TOGGLE'});
return (
  <div>
    <h1>To dos</h1>
    <div>
      Learn Redux&nbsp;
      <input
        type="checkbox"
        checked={!!this.state.checked}
        onClick={onClick}
      />
    </div>
    {
      this.state.checked ? (<h2>Done!</h2>) : null
    }
  </div>
);

If you remove the !! the component still works as expected.

If I leave the !! but remove the onClick property then nothing happens because the state isn't changed so the control never re-renders. The checkbox remains unchecked and the Done! message never displays

If I remove the onClick and the !!, the checkbox changes from unchecked to checked (despite it being bound to state.checked which is false by default) but the state obviously never changes because the Done! message won't display.

What is the !! doing?

GooseZA
  • 891
  • 1
  • 8
  • 13

1 Answers1

0

var t= undefined
var t1= null
var t2= ""
var t3 = false
 console.log("t", !!t)
 console.log("t1", !!t1)
 console.log("t2", !!t2)
 console.log("t3", !!t3)

These are done to check for the valid processable value. You can see the snippet that what all values will give false value

simbathesailor
  • 3,440
  • 2
  • 15
  • 25