0

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:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. 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.
3
  • {} 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 this const {...object} = classInstance from stackoverflow.com/questions/34699529/… Commented Oct 12, 2021 at 22:09
  • Thanks @talfreds . The idea here is I'll be getting data back from server in this class structure. I just want to pass through and display in simple table :/ Commented Oct 12, 2021 at 22:32
  • const {...object} = classInstance should solve the problem then? where object is the value for the data prop Commented Oct 12, 2021 at 22:36

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.