title: How to put object in ternary conditional?
body: <p><strong>CODE:</strong></p>
  
  <pre><code>var React = require('react');
  var Ingredient = require('./Ingredient.jsx')
  var Recipe = React.createClass({
      getInitialState: function() {
          return {
              showIngredients: false
          };
      },
      handleClick: function() {
          this.setState({
              showIngredients: !this.state.showIngredients
          });
      },
      render: function() {
  
          var i = 0;
  
          var ingredientsList = this.props.ingredients.map(function(item) {
              i++;
              return &lt;Ingredient key={i} name={item}/&gt;;
          });
  
          return (
              &lt;table&gt;
                  &lt;tbody&gt;
                      &lt;tr className="recipeName" onClick={this.handleClick}&gt;
                          &lt;td&gt;{this.props.name}&lt;/td&gt;
                      &lt;/tr&gt;
                      {this.state.showIngredients ? {ingredientsList} : null }
                  &lt;/tbody&gt;
              &lt;/table&gt;
          );
      }
  });
  
  module.exports = Recipe;
  </code></pre>
  
  <p>This generates the following error:</p>
  
  <blockquote>
    <p>main.js:18463 Uncaught Error: Invariant Violation: Objects are not
    valid as a React child (found: object with keys {ingredientsList}). If
    you meant to render a collection of children, use an array instead or
    wrap the object using createFragment(object) from the React add-ons.
    Check the render method of <code>Recipe</code>.</p>
  </blockquote>