0

I've seen some React code where double pipe is used in an onClick:

<button onClick={() => setOne(false) || setTwo(false)}>Click</button>

What does the double pipe do in this structure?

Gen Tan
  • 858
  • 1
  • 11
  • 26
  • Does this answer your question? [What does this symbol mean in JavaScript?](https://stackoverflow.com/questions/9549780/what-does-this-symbol-mean-in-javascript) – jonrsharpe Aug 05 '22 at 08:09
  • I dont think so as setState does not return a boolean – Gen Tan Aug 05 '22 at 08:11
  • 1
    It's still the same operator, though. This isn't any special React/JSX syntax, just basic JS. – jonrsharpe Aug 05 '22 at 08:13
  • its same as doing ```() => { if (!setOne(false)) setTwo(false) }``` – bogdanoff Aug 05 '22 at 08:23
  • All values in JS can be seen as booleans, not just `true` / `false` https://developer.mozilla.org/en-US/docs/Glossary/Truthy – Keith Aug 05 '22 at 08:26
  • If `setOne` is a state setter returned from `useState`, this usage of `||` doesn't make sense to me. State setters return void. If it is another function, it may return a boolean, hence working in the way @jonrsharpe mentioned – Sinan Yaman Aug 05 '22 at 08:47
  • They don't return void, that's not a value; they return undefined, which is false-y. This is basically a hacky way to call two functions, you could also use the comma operator or add braces to define an actual block body. – jonrsharpe Aug 05 '22 at 08:48
  • Didn't know they return undefined, thanks. – Sinan Yaman Aug 05 '22 at 08:54

0 Answers0