Tengo esta página Index.js que, a través de serverSideProps, devuelve todos los consumos representados por una interfaz desde un archivo json simulado. Mi objetivo es pasar el resultado a un componente que usa DataGrid para mostrar datos a los usuarios y permitirles modificar los valores.

 export const getServerSideProps: GetServerSideProps = async () => { const consumptionsData: Consumption[] = await consumptionService.getAll(); return { props: { consumptionsData: consumptionsData, }, } } export default ConsumptionsGrid;

interfaz

 export interface Consumption { ConsumptionID: number; CastingID: number; Elemento1: number; Elemento2: number; Elemento3: number; Elemento4: number; Elemento5: number; };

Paso el resultado de esta manera.

 function ConsumptionsGrid(props: JSX.Element) { const [tableData, setTableData] = React.useState<GridRowModel[]>([]); React.useEffect(() => setTableData(props.consumptionsData.map()), [props, setTableData]); <-- consumptions.Data throw the error ...other code return ( <div style={{ height: 400, width: 'auto' }}> <DataGrid experimentalFeatures={{ newEditingApi: true }} columns={columns} rows={data} rowCount={rowCountState} loading={isLoading} rowsPerPageOptions={[25]} pagination {...rowsState} paginationMode="server" onPageChange={(page) => setRowsState((prev) => ({ ...prev, page }))} onPageSizeChange={(pageSize) => setRowsState((prev) => ({ ...prev, pageSize })) } /> </div> ); } export { ConsumptionsGrid };

Los datos de consumo como se escribe arriba arrojan este error.

 any Property 'consumptionsData' does not exist on type 'Element'.ts(2339)

mi pregunta ahora es ¿cómo debo caracterizar los accesorios cuando paso el argumento en el componente para manejarlo como quiero?