What does '&&' operator indicate with { this.props.children && React.cloneElement(this.props.children, { foo:this.foo})

Question

I have react class that is rendered using react router. I understand that React.cloneElement is used to pass elements from parent to child. But why/what does the \'&&

Answer 1

In simple words the purpose of that && is:

Do not attempt to clone and render children when there are no children.

So if you use Users like this:

then both Child1 and Child2 will get rendered with additional props foo.

But if the parent is used in this way or , there are no child components to render. So we are performing a check before we invoke React.cloneElement.

&& is equivalent to boolean AND: 1 AND A === A => 1 && A = A

|| is equivalent to boolean OR: 1 OR A = 1 => 1 || A = 1