Is it possible to pass an object directly to Material-table data? I have no issues if I define my data using the fields directly, e.g.
const [data, setData] = useState([{id:'id', name:'name', description:'description', base_price:'10'}]);
but get an error from react if I try to use an object class.
const [data, setData] = useState([new ProductImpl(1, "productName", "description of product", 12.50, new Date(), 1)]);
where this class has the same fields as the material table is looking for:
export class ProductImpl implements Product {
id: number;
name: string;
description: string;
base_price: number;
posted_date: Date;
category_id: number;
constructor (
id: number,
name: string,
description: string,
base_price:number,
posted_date: Date,
category_id: number)
{
this.id = id;
this.name = name;
this.description = description;
this.base_price = base_price;
this.posted_date = posted_date;
this.category_id = category_id;
}
}
const ProductTable = (): JSX.Element => {
const columns = [
{ title: "Id", field: "id" },
{ title: "name", field: "name" },
{ title: "description", field: "description" },
{ title: "base_price", field: "base_price" },
{ title: "posted_date", field: "posted_date" },
{ title: "category_id", field: "category_id" },
];
const [data, setData] = useState([{id:'id', name:'name', description:'description', base_price:'10'}]);
return (
<div className="ProductTable">
<MaterialTable
title="Products"
columns={columns}
data={data}
/>
</div>
);
};
export default ProductTable;
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
{}is an object, so you are passing an object. If you mean pass a class, what is the benefit of doing so? If you are using the class elsewhere you can use a solution like thisconst {...object} = classInstancefrom stackoverflow.com/questions/34699529/…const {...object} = classInstanceshould solve the problem then? where object is the value for thedataprop