React-data-grid giving warning when using Basic DropDownEditor

Question

Here's the versions I'm using for react-data-grid. Running app on Chrome.

"react": "^15.4.2",
"react-data-grid": "^2.0.8",
"react-data-grid-addons": "^2.0.17",

I am replicating the Build-In-Editors example from the main website. The grid itself is operating as intended but I'm getting the following warnings in Chrome's console:

Warning: Failed prop type: Invalid prop `options[0]` supplied to `DropDownEditor`.
in DropDownEditor (created by HomePage)
in HomePage (created by RouterContext)
in div (created by App)
in App (created by RouterContext)
in RouterContext (created by Router)
in Router

Warning: Failed prop type: The prop `value` is marked as required in `DropDownFormatter`, but its value is `undefined`.
in DropDownFormatter (created by HomePage)
in HomePage (created by RouterContext)
in div (created by App)
in App (created by RouterContext)
in RouterContext (created by Router)
in Router

Here's the code snippet that set's up the code for React Data Grid component:

Imports:

import {Editors, Formatters} from 'react-data-grid-addons';
const { DropDownEditor } = Editors;
const { DropDownFormatter } = Formatters;

Parameter setup:

const titleTypes = [
        { id: 'bug', value: 'bug', text: 'Bug', title: 'Bug' },
        { id: 'improvement', value: 'improvement', text: 'Improvement', title: 'Improvement' },
        { id: 'epic', value: 'epic', text: 'Epic', title: 'Epic' },
        { id: 'story', value: 'story', text: 'Story', title: 'Story' }
    ];

    const TitleTypesEditor = <DropDownEditor options={titleTypes}/>;
    const TitleTypesFormatter = <DropDownFormatter options={titleTypes}/>;

    this.state = {
        columns: [{key: 'id', name: 'ID'}, {key: 'title', name: 'Title',
            editable: true, editor: TitleTypesEditor, formatter: TitleTypesFormatter}],
        rows: [{id:1, title: 'title1'}, {id:2, title: 'bug'}]
    };

Rendering the component...

  <ReactDataGrid
            columns={this.state.columns}
            rowsCount={this.state.rows.length}
            rowHeight={50}
            minHeight={200}
            rowGetter={this.rowGetter}
            enableCellSelect={true}
            onGridRowsUpdated={this.handleGridRowsUpdated}
        />

score 0 · Answer 1 · answered May 26 '18 at 10:56

Try Editors.AutoComplete instead of DropDownEditor and DropDownFormatter.

   import {Editors} from 'react-data-grid-addons';


   const TitleTypesEditor = <Editors.AutoComplete options={titleTypes}/>;
   const TitleTypesFormatter = <Editors.AutoComplete options={titleTypes}/>;

React-data-grid giving warning when using Basic DropDownEditor

1 Answers1