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

The && is the exact same operator as you would find in any javascript expression, such as...

if( condition1 && condition2) {

}

It is a feature of javascript that an expression of the form...

(condition1 && condition2)

will evaluate to condition2, if condition1 is true, or null if condition1 is false. It is effectively shorthand for...

if(condition1) {
    condition2;
}

We use this shorthand by placing a React element as condition 2, getting...

(condition1 && )

which is effectively...

if(condition1) {
    
}