Can't display the fetch data - php

Question

I am new in ReactJS so fetching data isn't my expertise, so I'm trying to learn ReactJS with my PHP Native. The problem is fetching data is difficult for me. This code below there's no error but it won't display my data.
It can't display in my UI, the data is stayed in console(Network -> Response), i tried everything still can't output it. Can someone help?
import './Timesheet.css';
import React, { useState, useEffect } from 'react';
import { Table, Container, Button, } from 'react-bootstrap';
const Timesheet = () => {
const [item, setItem] = useState([]);
useEffect(() => {
fetch("http://localhost/WaterRefillingStation/app/controllers/timesheet_controller.php")
.then(response => response.json())
.then(
(result) => {
setItem(result);
}
)
}, [])
return (
<Container fluid>
<div className="d_flex my-4, text-uppercase">
<h1>
Timesheet Screen
</h1>
</div>
<div className="float-end, tryy" >
<Button variant="success" size="md">Time IN</Button>{' '}
<Button variant="secondary" size="md">Time OUT</Button>{' '}
<Button variant="danger" size="md">Logout</Button>
</div>
<Table striped bordered hover size="md" variant="dark" responsive="xl" >
<thead className="thead-dark">
<tr style={{textAlign: "center"}}>
<th>ID</th>
<th>Date</th>
<th>Profile Picture</th>
<th>Last Name</th>
<th>First Name</th>
<th>Designation</th>
<th>Time IN</th>
<th>Time OUT</th>
</tr>
</thead>
<tbody>
{item.map(item => (
<tr key={item}>
<td>{item.userID}</td>
<td>{item.birthday}</td>
<td>{item.profpic}</td>
<td>{item.lastname}</td>
<td>{item.firstname}</td>
<td>{item.designation}</td>
<td>{item.created_at}</td>
<td>{item.updated_at}</td>
</tr>
))}
</tbody>
</Table>
</Container>
);
}
export default Timesheet;

Answer 1

Ok, it seems that you have used .map in the wrong way. You can use it for an array, not an object. use this instead:
return (
<Container fluid>
<div className="d_flex my-4, text-uppercase">
<h1>
Timesheet Screen
</h1>
</div>
<div className="float-end, tryy" >
<Button variant="success" size="md">Time IN</Button>{' '}
<Button variant="secondary" size="md">Time OUT</Button>{' '}
<Button variant="danger" size="md">Logout</Button>
</div>
<Table striped bordered hover size="md" variant="dark" responsive="xl" >
<thead className="thead-dark">
<tr style={{textAlign: "center"}}>
<th>ID</th>
<th>Date</th>
<th>Profile Picture</th>
<th>Last Name</th>
<th>First Name</th>
<th>Designation</th>
<th>Time IN</th>
<th>Time OUT</th>
</tr>
</thead>
<tbody>
<tr key={item}>
<td>{item.userID}</td>
<td>{item.birthday}</td>
<td>{item.profpic}</td>
<td>{item.lastname}</td>
<td>{item.firstname}</td>
<td>{item.designation}</td>
<td>{item.created_at}</td>
<td>{item.updated_at}</td>
</tr>
</tbody>
</Table>
</Container>
if you want to have a table for each user (for example), you should to provide data like below in your backend:
{
data:[
{ USER1 Info},
{ USER2 Info},
// so on
]
}