I have set up a React environment, created a hook named ApiTable, and implemented a method called renderTable. My goal is to fetch data from the API endpoint located at
https://jsonplaceholder.typicode.com/usersCurrently, all the columns are being squished together on the left side. The data isn't displaying correctly and appears compressed on the left side. I suspect there might be an issue with how I structured the table data.
Furthermore, I'm uncertain whether the axios request should be placed inside the useEffect or not.
https://imgur.com/a/Up4a56v
const ApiTable = () => {
const url = 'https://jsonplaceholder.typicode.com/users';
const [data, setData] = useState([]);
useEffect(() => {
setData([data]);
axios.get(url)
.then(json => console.log(json))
}, []);
const renderTable = () => {
return data.map((user) => {
const { name, email, address, company } = user;
return (
<div>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Address</th>
<th>Company</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>email</td>
<td>address</td>
<td>company</td>
</tr>
</tbody>
</div>
)
})
}
return (
<div>
<h1 id='title'>API Table</h1>
<Table id='users'>
{renderTable()}
</Table>
</div>
)
};