CODEWITHSUNDEEP
javascripthtmlreactjshtml-table
gs_vlad
gs_vlad

Reputation: 1449

Render 2 table rows in ReactJS

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):

  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 doesn't work. It says: A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object I tried also to wrap 2 rows in a div but I get wrong rendering. Please, suggest correct solution.

Upvotes: 4

Views: 4098

Answers (1)

Andy Noelker
Andy Noelker

Reputation: 11269

The render() method on a React component must always return a single element. No exceptions.

In your case, I would suggest wrapping everything inside a tbody element. You can have as many of those as you want in a table without disrupting your row structure, and then you'll always return one element inside 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>
    );
}

Upvotes: 17

Related Questions