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.
Share Improve this question asked Jul 31, 2016 at 14:34 Mike WMike W 1,4031 gold badge22 silver badges33 bronze badges 3- 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
Reset to default 6Though 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.