React Material-UI: Populating Rows in DataGrid returns undefined

Viewed 18

In my React application, I want to fill the rows of a Material-UI Data Grid with backend data.

To achieve this, I make a GET request to the backend, which returns an AxiosResponse containing the data.

This AxiosResponse, I store in a variable named list, using useState().

Afterwards, I iterate over list to map the data to an Array of Objects, named testrows.

In the return method with DataGrid, I want to set property row to testrows.

However on rendering, it returns an error saying that testrow is undefined.

What am I doing wrong here?

import ...

export default function FruitList() {

    const [list, setList] = useState<AxiosResponse>();

    const columns: GridColDef[] = [
        {
            field: 'id',
            headerName: 'Fruit ID',
            type: 'number',
        },
        {
            field: 'type',
            headerName: 'Fruit Type',
            type: 'string',
        },
        {
            field: 'harvest',
            headerName: 'Harvest Date',
            type: "date",
        },
        {
            field: 'entryDate',
            headerName: 'Entry Date',
            type: "date",
        },
    ];

    // Get list of fruits and store in variable "list"
    useEffect(() => {
        axios.get('http://localhost:3000/v1/fruit/'
            .then(result => {
                setList(result);
            })
    }, [])

    let testrows = list?.data.map((element: { id: any, type: any, harvest: any, entryDate: any }) => {
        return {
            id: element.id,
            type: element.type,
            harvest: element.harvest,
            entryDate: element.entryDate
        }
    }
    );

    // also tried useMemo:
       const testrows = useMemo(() =>
         list?.data.map((element: { id: any, type: any, harvest: any, entryDate: any }) => {
            return {
                id: element.id,
                type: element.type,
                harvest: element.harvest,
                entryDate: element.entryDate
            }
        }),
    [list?.data]
);

    // console output: "test: undefined"
    console.log("test: ", testrows);

    return (
        <div>
            <div>
                <DataGrid
                    rows={testrows}
                    columns={columns}
                />                    
            </div>            
        </div>
    );
}
0 Answers
Related