Render 2 row table in ReactJS

Question

I want to get extensible row functionality for a table. Suppose we have a table with task names and task complexity. When you click on one task, the task description is shown below. I am trying to do this with ReactJS (in the render method):

  if (selectedTask === task.id) {
    return [
      <tr>
        <td>{task.name}</td>
        <td>{task.complexity}</td>
      </tr>,
      <tr>
        <td colSpan="2">{task.description}</td>
      </tr>
    ];
  } else {
    return <tr>
      <td>{task.name}</td>
      <td>{task.complexity}</td>
    </tr>;
  }

And it does not work. It says: A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object I also tried to wrap 2 lines in a div, but I'm wrong. Please suggest the right solution.

Answer 1

The method render()for the React component should always return a single element . There are no exceptions.

tbody. , , , render().

if (selectedTask === task.id) {
    return (
        <tbody>
            <tr>
                <td>{task.name}</td>
                <td>{task.complexity}</td>
            </tr>,
            <tr>
                <td colSpan="2">{task.description}</td>
            </tr>
       </tbody>
    );
} else {
    return (
        <tbody>
            <tr>
                <td>{task.name}</td>
                <td>{task.complexity}</td>
            </tr>
      </tbody>
    );
}