дублируется в DOM

Автор вопроса: user20389696

<h1> и <table> дублируются в DOM каждый раз при добавлении новых значений в тело таблицы. Как сделать так чтобы не дублировалось?

return users.map((user) => (
    <>
      <h1>{renderPhrase(users.length)}</h1>
      <table class="table">
        <thead>
          <tr>
            <th scope="col">Имя</th>
            <th scope="col">Качество</th>
            <th scope="col">Профессия</th>
            <th scope="col">Встретил, раз</th>
            <th scope="col">Оценка</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{user.name}</td>
            <td>
              {user.qualities.map((quality) => (
                <span className={`badge bg-${quality.color}`}>
                  {quality.name}
                </span>
              ))}
            </td>
            <td>{user.profession.name}</td>
            <td>{user.completedMeetings}</td>
            <td>{user.rate}</td>
            <button
              key={user._id}
              className="badge bg-danger m-2"
              onClick={() => {
                handleDelete(user._id)
              }}
            >
              delete
            </button>
          </tr>
        </tbody>
      </table>
    </>
  ))

А вот что в итоге получается:

Источник

Ответы (1 шт):

Автор решения: LIMPIX64

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

Чтобы всё работало как ожидается, вам нужно встроить map в тело таблицы и вернуть tr элемент для каждого пользователя

return (
    <>
      <h1>{renderPhrase(users.length)}</h1>
      <table class='table'>
        <thead>
        <tr>
          <th scope='col'>Имя</th>
          <th scope='col'>Качество</th>
          <th scope='col'>Профессия</th>
          <th scope='col'>Встретил, раз</th>
          <th scope='col'>Оценка</th>
        </tr>
        </thead>
        <tbody>
        {users.map((user) => (
            <tr>
              <td>{user.name}</td>
              <td>
                {user.qualities.map((quality) => (
                  <span className={`badge bg-${quality.color}`}>
                  {quality.name}
                </span>
                ))}
              </td>
              <td>{user.profession.name}</td>
              <td>{user.completedMeetings}</td>
              <td>{user.rate}</td>
              <button
                key={user._id}
                className='badge bg-danger m-2'
                onClick={() => {
                  handleDelete(user._id)
                }}
              >
                delete
              </button>
            </tr>
        ))}
        </tbody>
      </table>
    </>
  )

→ Ссылка

licensed under cc by-sa 3.0 with attribution.