Отображение таблицы с использованием реагирующих компонентов - это правильный способ отображения таблицы?

Question

Я пытаюсь создать очень простое табличное представление начальной загрузки и отображать строки, используя локальные значения состояния.

Я просто хочу понять, является ли это правильным способом отображения таблицы в реакции.

Row Component 
```import React, { Component } from "react";
class Human extends Component {
  render() {
    const { humans } = this.props;
    return humans.map(human => {
      return (
        <tr>
          <th scope="row">{human.id}</th>
          <td>{human.name}</td>
          <td>{human.designation}</td>
        </tr>
      );
    });
  }
}

export default Human;

```
import React, { Component } from "react";
import Human from "./human";

class HumanListing extends Component {
  state = {
    humans: [
      {
        id: 1,
        name: "titus",
        designation: "main"
      },
      {
        id: 2,
        name: "titus2",
        designation: "main2"
      }
    ]
  };

  render() {
    const { humans } = this.state;
    return (
      <table className="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
          </tr>
        </thead>
        <tbody>
          <Human humans={humans} />
        </tbody>
      </table>
    );
  }
}

export default HumanListing;
```

Нет сообщений об ошибках, кроме этого я получаю предупреждающее сообщение о том, что ключ должен быть включен для каждого значения списка

Answer 1

когда вы отображаете предметы, нужно назначить ключ

return humans.map((human,key) => {
  return (
    <tr key={key}>
      <th scope="row">{human.id}</th>
      <td>{human.name}</td>
      <td>{human.designation}</td>
    </tr>
  );
});

, и я думаю, что это хорошо для вас, но я не уверен, что с классом Human может быть HumanRows подойдет лучше, потому что этот классвернуть строки таблицы.По моему мнению, конечно, существует много способов сделать то же самое, но ваш выглядит хорошо.