How does a javascript && operator work

Question

I want to pass a prop to a React Component, conditional to a boolean in parent component's state, The component expects to have myProp as an object, the propTypes conflagration is bellow:

//component's code
class MyComponent extends Component {

    ...
    static propTypes = {
        myProp: propTypes.object
    }
    ...
}

Now, I am on to pass the prop like below:

//Parent component's code
class ParentComponent extends Component {
    constructor() {
        super();
        this.state = {
          par: true,
        }
    }
    render(){
        const obj = {
            key1: 'value1',
            key2: 'value2'
        }
        ...
        return ( 
            <MyComponent
                myProp = {this.state.par && obj}
            />
        )
    }
...
}

Executing the above code it gives me following warning in browser console:

Warning: Failed prop type: Invalid prop myProp of type boolean supplied to MyComponent, expected object.

Shubham Khatri · Accepted Answer · 2018-01-31 11:26:45Z

4

In your case myProp = {this.state.par && obj} if this.state.par is false and obj is present then boolean value false will be returned instead of obj, you should write it like

myProp = {this.state.par? obj: null}

As per the docs:

true && expression always evaluates to expression, and false && expression always evaluates to false.

Therefore, if the condition is true, the element right after && will appear in the output. If it is false, React will ignore and skip it.

edited Jan 31, 2018 at 11:26

answered Jan 31, 2018 at 11:23

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shubham Khatri Over a year ago

@HaiderAliAnjum Consider accepting the answer if it helped

T.J. Crowder · Accepted Answer · 2018-01-31 11:22:00Z

1

If this.state.par is false, then this.state.par && obj is false (boolean, not object).

You may want the conditional operator instead:

return ( 
    <MyComponent
        myProp = {this.state.par ? obj : null}
    />
)

Now, regardless of the flag, you're providing something of type object (obj or null).

Or somewhat more obscurely, add a ||:

return ( 
    <MyComponent
        myProp = {this.state.par && obj || null}
    />
)

...but I'd use the conditional.

Of course, MyComponent will need to understand that myProp may be null...

answered Jan 31, 2018 at 11:22

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Comments

Jason · Accepted Answer · 2018-01-31 11:23:11Z

0

I would include the boolean as a property inside the obj and check for the value inside the child component

render() {
   const obj = {
        key1: 'value1',
        key2: 'value2'
        par: this.state.par
    }
   return(
       <MyComponent myProp={obj} />
   );
}

and handle the true/falsiness in the child component.

answered Jan 31, 2018 at 11:23

Jason

11.4k22 gold badges94 silver badges185 bronze badges

2 Comments

Haider Ali Anjum Over a year ago

That's not helpful, It actually tends me to implement somecontrlling login in the Component as well. :(

Jason Over a year ago

@HaiderAliAnjum you don't say whether the rendering of the child component is dependent on the boolean state. So this solution assumes that you want MyComponent to render regardless of state and handle the logic there.

Collectives™ on Stack Overflow

How does a javascript && operator work

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related