title: React: inline conditionally pass prop to component
body: <p>I would like to know if there is a better way to conditionally pass a prop than using an if-statement. </p>
  
  <p>For example, right now I have:</p>
  
  <pre><code>var parent = React.createClass({
    propTypes: {
      editable: React.PropTypes.bool.isRequired,
      editableOpts: React.PropTypes.shape({...})
    },
    render: function() {
      if(this.props.editable) {
        return (
          &lt;Child editable={this.props.editableOpts} /&gt;
        );
      } else {
        // In this case, Child will use the editableOpts from its own getDefaultProps()
        return (
          &lt;Child /&gt;
        );
      }
    }
  });
  </code></pre>
  
  <p>Is there a way to write this without the if-statement? I am was thinking something along the lines of a type of inline-if-statement in the JSX:</p>
  
  <pre><code>var parent = React.createClass({
    propTypes: {
      editable: React.PropTypes.bool.isRequired,
      editableOpts: React.PropTypes.shape({...})
    },
    render: function() {
      return (
        &lt;Child 
          {this.props.editable ? editable={this.props.editableOpts} : null} 
        /&gt;
      );
    }
  });
  </code></pre>
  
  <p><em>To wrap-up</em>: I'm trying to find a way to define a prop for <code>Child</code>, but pass a value (or do something else) such that <code>Child</code> still pulls that prop's value from <code>Child</code>'s own <code>getDefaultProps()</code>.</p>