Не создаются компоненты REACT в цикле

Question

Цикл в return REACT вопрос из предыдущей части.

Сейчас я могу дотянуться до каждого свойства обьекта workers следующим образом:

workers[item][item2].firstName

И на основе этих данных я хочу сделать столько компонентов TableRow, сколько записей.

    {isReady && Object.keys(workers).map(item =>{
      // console.log(workers[item])
      Object.keys(workers[item]).map(item2 =>{
        console.log(workers[item][item2].job_name)
        {
        <TableRow
          firstName={workers[item][item2].firstName}
          lastName={workers[item][item2].lastName}
          job_name={workers[item][item2].job_name}
          hourly_rates = {workers[item][item2].hourly_rates}
          fixed_fee={workers[item][item2].fixed_fee}
        />
      }
      })
    })
  }

что хранит в себе workers:

или текстом:

{
    "data": [
        {
            "workerid": 2,
            "firstName": "Vladimir",
            "lastName": "Moskalev",
            "ratesid": "mnt",
            "idrates": 1,
            "job_name": "mentor",
            "hourly_rates": "7",
            "fixed_fee": "0",
            "jobcode": "mnt"
        },
        {
            "workerid": 1,
            "firstName": "Anton",
            "lastName": "Buketov",
            "ratesid": "mnt",
            "idrates": 1,
            "job_name": "mentor",
            "hourly_rates": "7",
            "fixed_fee": "0",
            "jobcode": "mnt"
        }
    ]
}

но ничего не происходит

компонет TableRow

import React from 'react'

const TableRow = ({firstName,lastName,job_name,hourly_rates,fixed_fee}) => {
  return (
    <tr>
      <td>{ firstName } { lastName }</td>
      <td>{ job_name }</td>
      <td>{ hourly_rates }</td>
      <td>{ fixed_fee }</td>
    </tr>
    
  )
}

export default TableRow

Answer 1

Ваш рендер должен выглядеть вот так:

{isReady && workers?.data?.map(item => (
    <TableRow
      firstName={item.firstName}
      lastName={item.lastName}
      job_name={item.job_name}
      hourly_rates={item.hourly_rates}
      fixed_fee={item.fixed_fee}
    />
  )
}

Обращаешься сразу к workers.data(Проверяя на существование) и вызываешь метод map, т.к. data это массив.

Answer 2

У вас в workers падает объект, в котором по ключу data находится массив, значит вытягивать его нужно так:

workers.data.map(item =>{

Также, чтобы вернуть компонент из функции, нужен return, который вернет компонент в круглых скобках

БЛОГ НА HUSL

Не создаются компоненты REACT в цикле

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