Выпуск с отображением массива объекта реквизита в компонент таблицы данных

Question

Я пытаюсь создать таблицу данных с помощью реакции.Я могу правильно отображать данные от объекта, который я передаю, как подпорки в таблице.Однако все данные отображаются в первом столбце таблицы, а не распределяются по всем столбцам.

Реквизит, который я передаю в App.js, следующий:

const obj = [
  {
    date: "2019-04-17",
    spend: 100,
    preloads: 111.43,
    installs: 100
  },
  {
    date: "2019-04-16",
    spend: 200,
    preloads: 911.43,
    installs: 200
  },
  {
    date: "2019-04-15",
    spend: 300,
    preloads: 9211.43,
    installs: 300
  }
];

, и я выполняю рендеринг в App.js с:

<MetricsTable data={obj}/>

My MetricsTable.Файл компонента js имеет следующий вид:

import React from "react";
import { Table } from "react-bootstrap";

class TableRow extends React.Component {
  render() {
    const { data } = this.props;
    const row =
      this.props.data &&
      data.map(data => (
        <tr>
          <td>{data.date}</td>
          <td>{data.spend}</td>
          <td>{data.preloads}</td>
          <td>{data.installs}</td>
        </tr>
      ));
    return <div>{row}</div>;
  }
}

class MetricsTable extends React.Component {
  render() {
    return (
      <div>
        <Table striped bordered hover size="sm">
          <thead>
            <tr>
              <th>Date</th>
              <th>Spend ($)</th>
              <th>Preloads</th>
              <th>Installs</th>
            </tr>
          </thead>
          <tbody>
            <TableRow data={this.props.data && this.props.data} />
          </tbody>
        </Table>
      </div>
    );
  }
}

export default MetricsTable;

Тем не менее, когда я запускаю этот код, вот как получаются данные:

Кто-нибудь знает, какЯ могу распределить данные по заголовкам столбцов?

Answer 1

Рассмотрите возможность использования функционального компонента вместо TableRow. Проблема была в неправильной разметке, так как каждый <tr> был заключен в <span>.

export default function TableRow(props) {
  console.log(props);
  const { data } = props;
  return obj.map(data => (
    <tr>
      <td>{data.date}</td>
      <td>{data.spend}</td>
      <td>{data.preloads}</td>
      <td>{data.installs}</td>
    </tr>
  ));
}