I'm new in React, I do not know how to show different type of data. In the code below it looks like I can get the data and save it in setTableData
, but I cannot show it in table.
function Home(props) {
const [tableData, setTableData] = useState([]);
useEffect(() => {
async function loadUsers() {
axios
.get(`http://localhost/fastlink/FetchData.php`, {})
.then((res) => {
const data = res.data;
console.log(data);
setTableData(data);
})
.catch((error) => {
console.log(error);
});
}
loadUsers();
}, []);
const [columns, setColumns] = useState([
{ title: "Name", field: "name" },
{ title: "Email", field: "email" },
]);
return (
<div
style={{
flexGrow: "1",
padding: "theme.spacing(3)",
width: "80%",
float: "right",
}}
>
<MaterialTable
icons={tableIcons}
style={{ marginTop: "10%" }}
title="All Users"
columns={columns}
data={tableData}
editable={{
onRowAdd: (newData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
setTableData([...tableData, newData]);
resolve();
}, 1000);
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
const dataUpdate = [...tableData];
const index = oldData.tableData.id;
dataUpdate[index] = newData;
setTableData([...dataUpdate]);
resolve();
}, 1000);
}),
onRowDelete: (oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
const dataDelete = [...tableData];
const index = oldData.tableData.id;
dataDelete.splice(index, 1);
setTableData([...dataDelete]);
resolve();
}, 1000);
}),
}}
/>
</div>
);
}
This image is the data in my database, I want to show Name and email in my Material-Table