1

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>
  );
}
Alyssa
  • 43
  • 1
  • 6

1 Answers1

1

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}
/>

See a working example here

John Ruddell
  • 25,283
  • 6
  • 57
  • 86