I have the simplest component ever. I imported DataGrid from MaterialUI, I made a variable for the columns and a variable for the rows, and I call the DataGrid in the render function of the function component. Now I receive a invalid hook call. I have seen this error on StackOverflow but there people used class components. I am using function components and there's nothing else inside the component. Yet I receive an error. How is this possible? What am I doing wrong?
import React from 'react'
import { DataGrid } from '@material-ui/data-grid'
const columns = [
{field: 'something', headername: 'ID'},
{field: 'title', headername: 'Title', width: 300},
{field: 'body', headername: 'Body', width: 600}
]
const rows = [
{id: 1, something: 'hello', title: 'title', body: 'body'}
]
function DataTable() {
return (
<div>
<DataGrid rows={rows} columns={columns}/>
</div>
)
}
export default DataTableI was importing the wrong datagrid.
I changed the import statement to import { DataGrid } from '@mui/x-data-grid';
Additionally, I installed this package which seems to be essential for using materialUI. https://www.npmjs.com/package/@mui/material?activeTab=readme