Допустим, ваш работодатель хотел составить список имен, возраста и даты рождения людей по какой-то странной конкретной причине.

Думаешь, блин, я даже вложенный массив сделать не могу. Шучу, ты лучший кодер в мире.

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

Если вы подумали о функции map(), то вы правы.

Во-первых, для начала вам понадобится массив для хранения этих специальных данных.

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

const headers= ["name", "age" ,"dob"];
const data =[
["Makayla","20","04/03/2002"],
["Xun","33","04/03/1988"],
];

Затем нам нужно создать удивительный компонент класса! Вы можете назвать это как хотите. Просто убедитесь, что у него есть столица…

import React from "react";

export class Database extends React.Component {
  render() {
    return (
      <span>
        {this.props.headers.map((title, idx) => (
          <h3 key={idx}>{title}</h3>
        ))}

        {this.props.data.map((row, idx) => (
          <h3 key={idx}>{row}</h3>
        ))}
      </span>
    );
  }
}

Обратите внимание на idx?

Они нужны нам, чтобы избежать этой ошибки:

должен иметь уникальный ключевой реквизит.

Проверьте метод рендеринга Database. См. https://reactjs.org/link/warning-keys для получения дополнительной информации. h3 в базе данных (http://localhost:3000/static/js/bundle.js:327:1) в div в приложении

React любит организацию, я имею в виду, что это единственная причина, по которой он был создан, верно?

Поэтому нам нужно добавить уникальные идентификаторы в заголовок каждой таблицы.

Затем вам нужно добавить данные в тег вашего компонента, где бы вы его ни вызывали…

   <Database headers={headers} data={data}></Database>

Надеюсь, это поможет.

Это просто и легко, но ошибки всегда возможны! Важно то, что мы учимся у них.