javascript - Render 2 table rows in ReactJS - Stack Overflow

I want to achieve expandable row functionality for table. Let's assume we have table with task names and task plexity. 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>{taskplexity}</td>
      </tr>,
      <tr>
        <td colSpan="2">{task.description}</td>
      </tr>
    ];
  } else {
    return <tr>
      <td>{task.name}</td>
      <td>{taskplexity}</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.

I want to achieve expandable row functionality for table. Let's assume we have table with task names and task plexity. 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.plexity}</td>
      </tr>,
      <tr>
        <td colSpan="2">{task.description}</td>
      </tr>
    ];
  } else {
    return <tr>
      <td>{task.name}</td>
      <td>{task.plexity}</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.

• javascript
• html
• reactjs
• html-table

Share Improve this question Follow edited Oct 21, 2015 at 9:34 gs_vlad asked Oct 20, 2015 at 9:17 gs_vladgs_vlad 1,45944 gold badges1616 silver badges3232 bronze badges 2

• just return the two tr in a string instead of array? – Salketer Commented Oct 20, 2015 at 10:02
• Actually real life task is a bit more plex. So, string would not be enough – gs_vlad Commented Oct 20, 2015 at 10:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 17

The render() method on a React ponent 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.plexity}</td>
            </tr>,
            <tr>
                <td colSpan="2">{task.description}</td>
            </tr>
       </tbody>
    );
} else {
    return (
        <tbody>
            <tr>
                <td>{task.name}</td>
                <td>{task.plexity}</td>
            </tr>
      </tbody>
    );
}