title: Render 2 table rows in ReactJS
body: <p>I want to achieve expandable row functionality for table.
  Let's assume we have table with task names and task complexity. When you click on one task the description of task is shown below. I try to do it this way with ReactJS (in render method):</p>
  
  <pre><code>  if (selectedTask === task.id) {
      return [
        &lt;tr&gt;
          &lt;td&gt;{task.name}&lt;/td&gt;
          &lt;td&gt;{task.complexity}&lt;/td&gt;
        &lt;/tr&gt;,
        &lt;tr&gt;
          &lt;td colSpan="2"&gt;{task.description}&lt;/td&gt;
        &lt;/tr&gt;
      ];
    } else {
      return &lt;tr&gt;
        &lt;td&gt;{task.name}&lt;/td&gt;
        &lt;td&gt;{task.complexity}&lt;/td&gt;
      &lt;/tr&gt;;
    }
  </code></pre>
  
  <p>And it doesn't work. It says:
  <code>A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object</code>
  I tried also to wrap 2 rows in a div but I get wrong rendering.
  Please, suggest correct solution.</p>