React: Multiple table rows in array.map during render

Question

I have this problem. I want to loop an array and display the values as a table where each element is a row in the table. So far, no problems. But depending on a value in each element, I want to show an additional row with more values for each array element. I have this code:

<tbody>
  {myList.map((item, i) => {
    return (
      <div>
        <tr key={i} onClick={toggleMobileOpen.bind(this, i)}>
          <td className="toggler">
            {item.mobile_open && <ArrowUp />}
            {!item.mobile_open && <ArrowDown />}
          </td>
          <td>{item.elem_one}</td>
          <td>{item.elem_two}</td>
          <td>{item.elem_three}</td>
        </tr>
        {item.mobile_open &&
          <tr className="test-td">
            <td>...</td>
          </tr>
        }
      </div>
    );
  })}
</tbody>

My problem is that I get:

Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tr>.

and

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>

When I try the above approach. Removing the div gives me Syntax error which I already knew but tried anyway.

Does anyone have an idea how to solve this?

João Cunha · Accepted Answer · 2017-12-12 10:06:25Z

22

You're doing

{item.mobile_open &&
          <tr className="test-td">
            <td>...</td>
          </tr>
        }

that prints false like <tr>false</tr> if mobile_open is false.

try

{item.mobile_open ?
              (<tr className="test-td">
                <td>...</td>
              </tr>) : null
            }

As for the div warning consider using React 16 Fragments

using React 16.0 fragment syntax

<tbody>
  {myList.map((item, i) => {
    return [
        <tr key={i} onClick={toggleMobileOpen.bind(this, i)}>
          <td className="toggler">
            {item.mobile_open && <ArrowUp />}
            {!item.mobile_open && <ArrowDown />}
          </td>
          <td>{item.elem_one}</td>
          <td>{item.elem_two}</td>
          <td>{item.elem_three}</td>
        </tr>,
        {item.mobile_open &&
          <tr className="test-td">
            <td>...</td>
          </tr>
        }

    ];
  })}
</tbody>

But I prefer the most recent React 16.2 Fragment Syntax

import React, { Fragment } from "react";

<tbody>
      {myList.map((item, i) => {
        return (
          <Fragment>
            <tr key={i} onClick={toggleMobileOpen.bind(this, i)}>
              <td className="toggler">
                {item.mobile_open && <ArrowUp />}
                {!item.mobile_open && <ArrowDown />}
              </td>
              <td>{item.elem_one}</td>
              <td>{item.elem_two}</td>
              <td>{item.elem_three}</td>
            </tr>
            {item.mobile_open &&
              <tr className="test-td">
                <td>...</td>
              </tr>
            }
          </Fragment>
        );
      })}
    </tbody>

3 Comments

BluePrint Over a year ago

Perfect, tried Fragment and it worked fine. Just one thing, I needed to remove the comma after the first </tr>.

João Cunha Over a year ago

@BluePrint yep I'm gonna edit. Twas copy paste mistake

BeeBee8 Over a year ago

key attribute should be on Fragment @JoãoCunha

Stuart Casarotto · Accepted Answer · 2017-12-11 16:09:36Z

In React16 you are now able to return an array of components allowing you to remove the <div />.

The code would look something like :

 <tbody>
      {myList.map((item, i) => {
        return [
            <tr key={i} onClick={toggleMobileOpen.bind(this, i)}>
              <td className="toggler">
                {item.mobile_open && <ArrowUp />}
                {!item.mobile_open && <ArrowDown />}
              </td>
              <td>{item.elem_one}</td>
              <td>{item.elem_two}</td>
              <td>{item.elem_three}</td>
            </tr>,

            //This inline conditional makes it weird but this works
            ...[item.mobile_open &&
              <tr className="test-td">
                <td>...</td>
              </tr>
            ]
        ];
      })}
    </tbody>

mb21 · Accepted Answer · 2017-12-11 16:07:59Z

0

This says it all: <div> cannot appear as a child of <tbody>

In myList.map(f), f should return exactly one <tr> each time it's called. So you could preprocess myList to contain JSON items than can then be rendered as you wish.

However, it's probably better to output one row for each data item you have, and display the additional information in a different way. Maybe insert a div inside the <td> when you click your arrow icon?

answered Dec 11, 2017 at 16:07

mb21

40.3k8 gold badges130 silver badges158 bronze badges

Collectives™ on Stack Overflow

React: Multiple table rows in array.map during render

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related