title: Pass in a <li> when there is data with ternary operator in React
body: <p>How can I optionally pass in a list item only if there's data in it? I'm storing all of my text information in <code>info.json</code>:</p>
  
  <pre><code>{
    "info": [
      {
        "name": "Bob",
        "description": "Bob Vance of Vance Refrigeration"
      },
      {
        "name": "Kevin",
        "description": ""
      },
      {
        "name": "Jim",
        "description": ""
      }
    ]
  }
  </code></pre>
  
  <p>I'm mapping each of these items and rendering them onto the page only if there's content inside. As you can see, Kevin and Jim doesn't have any description, so I wouldn't render it onto the list.</p>
  
  <pre><code>info(item) {
    &lt;div className="row"&gt;
      &lt;ul&gt;
        &lt;li&gt;{item.name}&lt;/li&gt;
        &lt;li&gt;{item.description == "" ? undefined : item.description}&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  } 
  
  //this.props.office is passed down from `App.js` and contains the JSON that is shown above
  render() {
    return (
      {(this.props.office).map((x) =&gt; this.info(x))}
    )
  }
  </code></pre>
  
  <p>How can I avoid displaying the list item if <code>item.description</code> is an empty string? I tried to set it to undefined but that doesn't work.</p>