Возврат всего, а не только первого ключевого элемента, используя .map в React JSX

Question

const table_body = [
  {
    id: "1",
    first_name: "Test",
    last_name: "Again",
    email: "test@gmail.com",
  },
  {
    id: "2",
    first_name: "Joe",
    last_name: "Bidal",
    email: "jb@gmail.com",
  }
]          

Это мой массив объектов.

<tbody className="lh-copy">
    <tr className="stripe-dark">
      {Object.values(this.props.table_body).map((item, i) => {
      for (const item of Object.values(item)) {
        return (
            console.log(item)
            // <td key={i} className="pa3">{item}</td>

        }
      })}
    </tr>
</tbody>

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

Я не хочу использовать несколько тегов <td>, потому что я хочу, чтобы пользователи могли добавлять больше входных данных, а содержимое объекта не будет просто id, first_name, last_name и email, это может быть большепоэтому {item.id} ....... не будет работать для моего случая.

Когда я читаю возвращенный файл console.log, он показывает только 1 и 2, который является идентификатором.Если я удалю return(), он будет отображать идентификатор, имя, фамилию, адрес электронной почты.

Вопрос в том, как мне вернуть все или в console.log для тестирования, или в тег td?Я попытался использовать цикл for в return (), но он, очевидно, не работает.

ОБНОВЛЕНИЕ: Это моя рабочая часть кода, благодаря @ kind_user

    {table_body.map((item, i) => {
      return (
        <tr key={i} className="stripe-dark">
          {Object.keys(item).map((element, j) => {
            return(
              <td key={j} className="pa3">{element}</td>
            )
          })}
        </tr>
      )
    })}

Answer 1

Отображение в массиве даст вам каждый объект отдельно.

  <tbody className="lh-copy">
    {table_body.map((item, index) => (
      <tr className="stripe-dark" key={index}>
        <td className="pa3">{item.id}</td>
        <td className="pa3">{item.email}</td>
      </tr>
    ))}
  </tbody>

Песочница: https://codesandbox.io/s/kor9lwvn87

Answer 2

Ключевое слово

• return прерывает цикл после первого цикла, поэтому вы получаете только первый элемент.

• table_body - это массив.Object.values функция избыточна.

• Вы поместили <tr /> в неправильном месте.

Предлагаемый подход:

{table_body.map((item, i) => (
   <tr className="stripe-dark" key={i}>
      {Object.values(item).map((elem) => <td className="pa3">{elem}</td>)}
   </tr>
)}