I'm quite new to react.js and have some troubles passing props to children. I want to do something like this:

render: function(){
   var idProp = this.props.id ? 'id={this.props.id}' : null;
   return (
     <div {idProp} />
   );
}

So the prop id should only be passed if a condition is true. But the above code is not working. Is this possible? What am I doing wrong? Thanks!

I'm quite new to react.js and have some troubles passing props to children. I want to do something like this:

render: function(){
   var idProp = this.props.id ? 'id={this.props.id}' : null;
   return (
     <div {idProp} />
   );
}

So the prop id should only be passed if a condition is true. But the above code is not working. Is this possible? What am I doing wrong? Thanks!

• javascript
• reactjs

• What are you actually trying to achieve here? There is no harm in passing a null prop to your child. – Henrik Andersson Commented Nov 16, 2014 at 6:26

3 Answers 3

var idProp = this.props.id ? 'id={this.props.id}' : null; in your code should be written in javascript way. Also you have to move "id=" to the JSX syntax.

render: function(){
   var idProp = this.props.id ? this.props.id : null;
   return (
     <div id={idProp} />
   );
}

The JSX piler converts the code to pure js first. To create dom elements, it uses the React.createElement(...) function. To identify the parameters for the function, the JSX piler needs attribute names of the element to be static. The converted javascript of the above code will be..

render: function(){
   var idProp = this.props.id ? this.props.id : null;
   return (
     React.createElement("div", {id: idProp})
   );
}

You can do this neatly with the spread operator if you can use it.

render: function() {
    var optionalProps = {};
    if (something) optionalProps.id = id;
    return (<div {...optionalProps} />);
}

With this approach, you don't have to declare an empty object, is possible to validate inline within the ponent JSX tag.

<Component  {...(id && {id})} />