I am using React.js in some project and I wanted to send a prop only if a condition is true, what I don't want is to send null values or empty stuff as the following example (or this question):

return (
    <SomeComponent
        prop1={foo === true ? "value" : null}
    />
);

I want to send the whole prop (not only its value) if a condition is true, something like this:

render: function(){

    ...

    return (
        <SomeComponent
           {if(foo === true) prop1="value"}
        />
    );
}

I also tried

    ...

    var prop1;
    if(foo === true) prop1 = "prop1='value'";

    return <SomeComponent {prop1} />;

and of course something like

    ...

    return (
        </SomeComponent
            {foo === true ? prop1="value" : ""}
        />
    );

In all cases I got a Unexpected token error, I have been searching but I haven't found anything, is there any way to do that in react?

Thanks.

I am using React.js in some project and I wanted to send a prop only if a condition is true, what I don't want is to send null values or empty stuff as the following example (or this question):

return (
    <SomeComponent
        prop1={foo === true ? "value" : null}
    />
);

I want to send the whole prop (not only its value) if a condition is true, something like this:

render: function(){

    ...

    return (
        <SomeComponent
           {if(foo === true) prop1="value"}
        />
    );
}

I also tried

    ...

    var prop1;
    if(foo === true) prop1 = "prop1='value'";

    return <SomeComponent {prop1} />;

and of course something like

    ...

    return (
        </SomeComponent
            {foo === true ? prop1="value" : ""}
        />
    );

In all cases I got a Unexpected token error, I have been searching but I haven't found anything, is there any way to do that in react?

Thanks.

• javascript
• reactjs

• 1 Why do you care if you pass a property with undefined value? – Omri Aharon Commented Jul 31, 2016 at 14:35
• Agreed, what's the actual purpose? The ponent will still have to know if the prop was passed in order to handle both cases. So far this seems like an XY problem-can you explain the use case? – Dave Newton Commented Jul 31, 2016 at 14:40
• Basically I was curious if you can do that in react and I thought the code would look cleaner that way, at least using @OmriAharon solution, even having in mind that the ponent will have to check for both cases anyway – Mike W Commented Jul 31, 2016 at 15:27

2 Answers 2

Though not sure what's the purpose - with ES6 spread operator, you can do it like this:

const props = {};

if (foo === true) { // or just if (foo) {
   props.prop1 = 'value';
}

<SomeComponent
   { ...props } />

Well even if you send the undefined values, you will always have the chance to validate in either of the two functions: ponentWillMount for the first load or ponentWillReceiveProps after first load. Besides you can always have the render function to validate. But if I answer as per the approach you are trying.

render : function(){
if(foo === true)
    return <SomeComponent prop1 ="value1" />;
else
     return <SomeComponent />;
}

And in the rendered ponent you can use the getDefaultProps function to set the default values if you doesn't pass any prop values which is your second case.