Rendering properties of array objects?

Question

React

When the button is clicked, [{}, {}, {}] are unloaded. Each object has properties.

const [list, listRender] = useState(<tr></tr>);
------------------------------------------------
const data = await request('api/search/test', 'POST', { ...form });

listRender(data.map((item, index) => 
    <td key={index}>{item}</td>
));

Render to the property sheet of the object.

<tbody>
           <tr>{list}</tr>
</tbody>

The error pops up "Error: Objects are not valid as a React child (found: object with keys {_id, date, studID, fullName, facility, typeFacility, time}). If you meant to render a collection of children, use an array instead ."

How to render the properties of each object into a separate table row?

Answer 1

listRender(data.map((item, index) => 
                <tr key={index}>
                    <td>{item.date}</td>
                    <td>{item.studID}</td>
                    <td>{item.fullName}</td>
                    <td>{item.facility}</td>
                    <td>{item.typeFacility}</td>
                    <td>{item.time}</td>
                </tr>
            ));

<tbody>
      {list}
</tbody>

Answer 2

If I'm not mistaken, and I often am. You need it like this:

listRender(data.map((item, index) => 
   <td key={index}>{item}</td>
));

// Не занимался подобными извращениями - map возвращает новый массив, forEach просто перебирает, советую подтянуть в этом плане

<tr>{list.map(el => el)}</tr>