Question

82

React: Multiple table rows in array.map during render

rated 0 times [ 86] [ 4] / answers: 1 / hits: 56597 / 7 Years ago, mon, december 11, 2017, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

karivictoriab

Add To Favorites

Follow

Total Points: 530

Total Questions: 90

Total Answers: 95

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

karivictoriab questions

1 JSX props should not use arrow functions eslint warning

Wed, Feb 10, 21, 00:00, 3 Years ago

1 How to scroll and expand an Accordion by onClick on an icon from a component?

Fri, Aug 21, 20, 00:00, 4 Years ago

1 Hide all labels and tooltips in Chart.js and make it very small size

Wed, Apr 8, 20, 00:00, 4 Years ago

1 CORS – Cross Origin Request Blocked – The 'Access-Control-Allow-Origin' header contains invalid value

Fri, Jan 24, 20, 00:00, 4 Years ago

1 VueJs clear form after success

Mon, Dec 30, 19, 00:00, 4 Years ago

View All

answered 7 Years ago julissaimana · Accepted Answer

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>