CODEWITHSUNDEEP
javascriptnode.jsreactjsreact-nativereact-router
Arathi Arumugam
Arathi Arumugam

Reputation: 251

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

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.

Upvotes: 24

Views: 78500

Answers (5)

sadiq
sadiq

Reputation: 2308

It's Short circuit evaluation

(if this part is true) && (this part will execute)

And it shorthand of:

if(condition){
   (this part will execute)
}

Upvotes: 65

yadhu
yadhu

Reputation: 15632

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:

<Users>
   <Child1 />
   <Child2 />
</Users>

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

But if the parent is used in this way <Users/> or <Users></Users>, 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

Upvotes: 3

Alex Young
Alex Young

Reputation: 4039

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 />
}

Upvotes: 18

Jeff McCloud
Jeff McCloud

Reputation: 5927

When && and || are used in this way, they are nicknamed "short circuit operators". In this usage, it can be thought of as a quickie "if (something is true)". So, if this.props.children is not null, it will call React.cloneElement. If it is null, it will not call React.cloneElement.

Here is a link on the official React documentation, with further reading: https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-with-logical-ampamp-operator

Upvotes: 9

Conan
Conan

Reputation: 690

You could drop that first clause and just use React.cloneElement(this.props.children, {foo:this.foo}), but it's included in your example to account for cases where there are no child components to be rendered.

Upvotes: 0

Related Questions