title: JSX, hide an element using inline ternary operator?
body: <p>I want to hide a table element when the courses array is empty. I was hoping the code below would work, but it doesn't. Any ideas? The line of code in question is:</p>
  
  <p><code>&lt;table className="table" style={courses.length &gt; 0 ? 'show' : 'display:none'}&gt;</code></p>
  
  <pre><code>import React, {PropTypes} from 'react';
  import CourseListRow from './CourseListRow';
  
  const CourseList = ({courses, onDelete}) =&gt; {
    return (
      &lt;table className="table" style={courses.length &gt; 0 ? 'show' : 'display:none'}&gt;
        &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;&amp;nbsp;&lt;/th&gt;
          &lt;th&gt;Title&lt;/th&gt;
          &lt;th&gt;Author&lt;/th&gt;
          &lt;th&gt;Category&lt;/th&gt;
          &lt;th&gt;Length&lt;/th&gt;
        &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
        {courses.map(course =&gt;
          &lt;CourseListRow key={course.id} course={course} onDelete={onDelete}/&gt;
        )}
        &lt;/tbody&gt;
      &lt;/table&gt;
    );
  };
  
  CourseList.propTypes = {
    courses: PropTypes.array.isRequired
  };
  
  export default CourseList;
  </code></pre>