Render a Table Body in React Using the Map Function

React: Multiple table rows in array.map during render

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>

More on fragments here

Array not rendering in table within map function but console.logs

personnel is a static array, the component won't re-render when it changes.
To make the component re renders, you have to make it a state

so you import useState from react import React, {useState} from 'react;
then change let personnel = [] to const [personnel , setPersonnel] = useState([]);
and in the call back instead of personnel.push(data) you change it to setPersonnel((prevData)=>[...prevData , data])

Not able to display bootstrap table using map function

You are trying to render the "genre" cell for each movie with...

<td>{movie.genre}</td>

...but in your data, the value at <SomeMovieInstance>.genre is an object, not a string:

{
    _id: "5b21ca3eeb7f6fbccd471819",
    title: "Trip to Italy",
    genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
    numberInStock: 7,
    dailyRentalRate: 3.5
},

This it what is making React so angry; as the error message says:

Objects are not valid as a React child

If you change that line to

<td>{movie.genre.name}</td>

...it should work.

Return 2 rows when populating table using map function

In react you can render (or return) only one parent component, to solve this normally you would wrap everything with a large <div> but you can't do it in this case so you should use React.Fragment, this component does not generate a new HTML element

const activeLogList = this.state.activeLogList.map(logEntry => (
  <React.Fragment>
    <Table.Row key={logEntry.event}>
      <Table.Cell verticalAlign="middle">{logEntry.event}</Table.Cell>
      <Table.Cell verticalAlign="middle">{this.formatTime(logEntry.time)}</Table.Cell>
      <Table.Cell verticalAlign="middle">{logEntry.name}</Table.Cell>
      <Table.Cell verticalAlign="middle">{logEntry.model}</Table.Cell>
      <Table.Cell verticalAlign="middle">{logEntry.ip}</Table.Cell>
      <Table.Cell verticalAlign="middle">{logEntry.description}</Table.Cell>
    </Table.Row>
    <Table.Row>
      SOMETHING GOES HERE
    </Table.Row>
  </React.Fragment>      
))

There is a shorthand for <React.Fragment>, is <> for opening and </> for closing, but is not supported by all parsers yet, React.Fragment is safer by now and also support the key attribute.

---

Related Topics