Querio mostrar una tabla del pakete andt con los datos que cargo desde mi servidor pero me da este error Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
Trate de revisar la documentacion pero no la entiendo bien etoy llamando la tabla dentro de mi componente y no sirve, el problema ocurre al poner en el div
si trato de renderizar otra cosa con los datos de students si sirve ejemplo
{students[0]?.firstName}
(texto adicional para que me deje postear ya creo que mi problema esta bien explicado)
import React, { useState, useEffect } from "react";
import { Table, Avatar, Spin, Modal, Empty, Button, Popconfirm } from "antd";
import axios from "axios";
const TestComponent = () => {
const [students, setStudents] = useState({});
useEffect(() => {
const fetchStudent = async () => {
try {
const config = {
headers: { "Access-Control-Allow-Origin": "*" },
};
const studentsFetched = await axios.get(
"http://localhost:1020/api/students/page/1",
config
);
setStudents(studentsFetched.data);
} catch (error) {}
};
fetchStudent();
}, []);
const colums = [
{
title: "",
Key: "avatar",
render: (text, student) => (
<Avatar size="large" style={{ backgroundColor: "orange" }}>
{`${student.firstName.charAt(0).toUpperCase()}${student.lastName
.charAt(0)
.toUpperCase()}`}
</Avatar>
),
},
{
title: "studentId",
dataIndex: "studentId",
Key: "studentId",
},
{
title: "firstName",
dataIndex: "firstName",
Key: "firstName",
},
{
title: "lastName",
dataIndex: "lastName",
Key: "lastName",
},
{
title: "email",
dataIndex: "email",
Key: "email",
},
{
title: "Gender",
dataIndex: "gender",
Key: "gender",
},
{
title: "",
Key: "buttom",
render: (student) => (
<Popconfirm
title="Are you sure to delete this task?"
// onConfirm={() => deleteStudent(student.studentId)}
okText="Yes"
cancelText="No"
>
<a href="#">Delete</a>
</Popconfirm>
// <Button
// onClick={() => deleteStudent(student.studentId)}
// type="delete"
// >
// Delete
// </Button>
),
},
];
return (
<div>
<Table
style={{ marginBottom: "100px" }}
dataSource={students}
columns={colums}
rowKey="studentId"
pagination={false}
/>
</div>
);
};
export default TestComponent;