hi there guys,. I'm getting data from my API, when I make a console.log or JSON.stringify in the API data it shows without problems but when I pass the data in a table with the map, simply nothing is presented in the table.
ATT: My API Responde status 302
const UserData =() => {
const [users, setUsers] = useState([]);
const loadUser = () => {
getUsers().then(data => {
if(data.error) {
console.log(data.error)
}else{
setUsers(data)
}
})
}
useEffect(() => {
loadUser();
},[]);
const inforUsers = () => {
return(
<Fragment>
<table className="table table-bordered mb-5">
<thead className="thead-dark">
<tr>
<th scope="col">Id</th>
<th scope="col">Nome</th>
<th scope="col">Email</th>
<th scope="col">role</th>
<th scope="col">createdAt</th>
</tr>
</thead>
<tbody scope="row">
{Object.keys(users).map((values, key) => (
<tr key={key}>
<td>
{values._id}
</td>
<td>
{values.name}
</td>
<td>
{values.email}
</td>
<td>
{values.role === 1? 'Admin' : 'Simples User'}
</td>
<td>
{values.createdAt}
</td>
</tr>
))}
</tbody>
</table>
</Fragment>
)
}
return(
<>
<div className="container mt-5">
{console.log(users)}
{inforUsers()}
</div>
</>
)
}
Top comments (1)
Add a console.log after
{Object.keys(users).map((values, key) => (
So you will know what are the values you're mapping.
Also, the problem is You're mapping Object.keys so the values in your map will only be the keys of the object
And to refer those values you have to do
users[values]