Title: react-data-grid AutoCompleteEditor not working
Tags: reactjs;react-data-grid
Question: import React, {Component} from 'react'
import ReactDataGrid from 'react-data-grid'
import update from 'immutability-helper'
import { Editors, Formatters } from 'react-data-grid-addons'
const {AutoComplete, AutoCompleteEditor, DropDownEditor} = Editors
const { DropDownFormatter } = Formatters
const productNames = [
id: 0,
title: 'productName1',
id: 1,
title:'productName2'
const productNamesEditor = <AutoCompleteEditor options={productNames} /&gt;
const columns= [
key: 'id',
name: 'ID',
key: 'product_name',
name: 'Product Name',
editable: true,
editor: productNamesEditor,
key: 'product_qty',
name: 'Product Qty',
editable:true,
key: 'product_rate',
name: 'Product Rate',
editable:true,
key: 'product_disc',
name: 'Product Disc',
editable:true,
class LineItems extends Component {
constructor(props) {
super(props)
this._columns = columns
console.log(this._columns)
this.state = {rows: this.props.lineItems.rows}
rowGetter = (i) =&gt; {
return this.state.rows[i];
handleGridRowsUpdated = ({ fromRow, toRow, updated }) =&gt; {
console.log(fromRow)
console.log(updated)
// calling slice() without arguments makes a copy of array
let rows = this.state.rows.slice();
for (let i = fromRow; i <= toRow; i++) {
let rowToUpdate = rows[i];
let updatedRow = update(rowToUpdate, {$merge: updated});
rows[i] = updatedRow;
this.setState({ rows })
this.props.onGridRowsUpdated(rows)
render () {
return (
<ReactDataGrid
ref={node =&gt; this.grid=node}
enableCellSelect={true}
columns={this._columns}
rowGetter={this.rowGetter}
rowsCount={this.state.rows.length}
maxHeight={300}
onGridRowsUpdated={this.handleGridRowsUpdated}
/&gt;
export default LineItems
Error: Element type is invalid: expected a string (for built-in
components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your component from the file
it's defined in, or you might have mixed up default and named imports.
Check the render method of EditorContainer....
The grid renders. If I try to enter/edit the cell to which I have set the AutoCompleteEditor, I get the above-mentioned error.


Here is another answer: Minor error in my code:
const {AutoComplete, AutoCompleteEditor, DropDownEditor} = Editors
should have been
const {AutoComplete: AutoCompleteEditor, DropDownEditor} = Editors

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2018:00:10/30/18', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<reactjs><react-data-grid>', 'Title': 'react-data-grid AutoCompleteEditor not working', 'ViewCount': 798, 'id': 53059317, 'user_AboutMe': None, 'user_AccountId': 14434731.0, 'user_DisplayName': 'Rounak Jain', 'user_Reputation': 379.0, 'user_Views': 41.0, 'user_id': 10427010.0}}