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 '&&' operator do with this kind of statement :
class Users extends React.Component {
getInitialState() {
return {
page:0
}
},
foo(){
this.setState({'page':1})
}
render() {
return (
<div>
<h2>Users</h2>
{ this.props.children && React.cloneElement(this.props.children, {
foo:this.foo})
</div>
)
}
}
I would like to understand why are we using '&&' operator here.
It's Short circuit evaluation
(if this part is true) && (this part will execute)
And it shorthand of:
if(condition){
(this part will execute)
}
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 && <ReactElement />)
which is effectively...
if(condition1) {
<ReactElement />
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With