Цикл в return REACT

Question

В идеале я хочу что бы компонент TableRow вывелось столько раз сколько элементов в workers. Но я не имею представления, каким образом в return можно написать цикл. for, foreach или map. выдает ошибки. В данном примере я просто хочу посмотреть что мне выдаеть console.log(item). спасайте

import React from 'react'
    import Footer from '../components/Footer'
    import { useState,useEffect} from 'react'
    import LoginedHeader from '../components/LoginedHeader'
    import TableRow from '../components/TableRow'
    import axios from "axios";


const HourlyRates = () => {
  const [workers,setworkers] = useState(null)
  const [isReady, setReady] = useState(false);

  useEffect(()=>{

    try {
      const res = axios.post("http://localhost:8080/hourlyRates",{
    }).then((response)=>{
      if(response.data){
        setworkers(response.data)
        console.log("++")
      }else{
        console.log("--")
      }
      setReady(true); // Проверка выполнена
  })
    } catch (error) {
      console.log("purums")
    }


  },[])
  // const info  = async ()=> {
    

  // }


  return (
    <>

        <LoginedHeader/>
        <table>
        <thead>
          <tr >
            <th>Mentor name</th>
            <th>Type of jobs</th>
            <th>Hourly rates</th>
            <th>Fixed fee</th>
          </tr>
        </thead>
          <tbody>

            { isReady && workers.map(item=>{console.log(item) }) }
        <TableRow/>
          </tbody>

        </table>
        <Footer />

    </>
  )
}

export default HourlyRates

что храниться в woreks.

Answer 1

Как подсказали комментарии проблема была в типе приходящих данных. проблема захардкодена следующим образом:

      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}
        />
      }
      })
    })
  }

БЛОГ НА HUSL

Цикл в return REACT

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