I am attempting to create a data table with react-data-grid with my own data. First I attempted to recreate the getting started example and I get the error
"TypeError: Cannot read property 'map' of undefined" at
.../node_modules/react-data-grid/dist/react-data-grid.js:1094.
I installed everything properly, I'm not sure why this is happening when I'm literally just following the tutorial.
Initially started with my own data, then I used the same exact data from the example and it still has the same error.
Using tutorial at this link: https://adazzle.github.io/react-data-grid/docs/quick-start
render(){
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'title', name: 'Title' },
{ key: 'count', name: 'Count' } ];
const data = [{id: 0, title: 'row1', count: 20}, {id: 1, title: 'row1',
count: 40}, {id: 2, title: 'row1', count: 60}];
return (
<div>
<ReactDataGrid>
columns={columns}
rowGetter={i => data[i]}
rowsCount={3}
minHeight={150}
</ReactDataGrid>
</div>
);
}
Your issue is you are closing the tag before trying to pass props. aka
<ReactDataGrid>
^-------------^
open close
This means that the props would be treated as "children" in the React ecosystem (Anything that is inbetween the component tags is considered children, I'm a little surprised this compiles, partly why I like to use typescript to get syntax issue warnings like this).
In React, the way you pass properties is on the tag itself before closing it.
<ReactDataGrid prop1={something}>
---------------^-----------------
^ prop on component before closing tag
To fix your current implementation just change it to this :)
<ReactDataGrid
columns={columns}
rowGetter={i => data[i]}
rowsCount={3}
minHeight={150}
/>