How to use AG-Grid in React? I am getting Build error

Question

Below is the component file:

import { AgGridReact } from '@ag-grid-community/react';
import {AllCommunityModules} from '@ag-grid-community/all-modules';
import '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
import '@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css';



export default class FormGrid extends React.Component<IFormGridProps,IFormGridState> {
   constructor(props: IFormGridProps, state: IFormGridState){
   super(props);
   this.state = {
     columnDefs: [
      { headerName: "Make", field: "make" },
      { headerName: "Model", field: "model" },
      { headerName: "Price", field: "price" }],
     rowData: [
      { make: "Toyota", model: "Celica", price: 35000 },
      { make: "Ford", model: "Mondeo", price: 32000 },
      { make: "Porsche", model: "Boxter", price: 72000 }]
     }
    }
public render(): React.ReactElement<IFormGridProps> {
return (
  <div className={ styles.formGrid }>
    <div className={ styles.container }>
      <div className={ styles.row }>
      <div className="ag-theme-balham" style={ {height: '200px', width: '600px'} }>
      <AgGridReact
        columnDefs={this.state.columnDefs}
        rowData={this.state.rowData}
        modules={AllCommunityModules}>
      </AgGridReact>
      </div>  
      </div>
    </div>
  </div>
 );
 }
 }

The error is below:

error TS2339: Property 'columnDefs' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }>...'

IFormGridState.ts file is below:

export interface IFormGridState{
   columnDefs: any,
   rowData: any
}

I couldn't understand why the error is coming. Please help me.

Wojciech Dynus Wojciech Dynus · Accepted Answer · 2019-11-15T15:47:49

Make sure that you have the "@ag-grid-community/all-modules" package installed I tried your code and it compiled fine but I had to have above package installed. Can you also paste your imports?

Additional notes/tips:

On line 2 you can only pass props as an argument for React Class components (that wouldn't give you such an error though)
There's no need to add type for your render method

How to use AG-Grid in React? I am getting Build error

1 Answers