How to extract Kendo React Component into its own file

Question

I am following the online documentation for Kendo UI for React and I am having some trouble with part of it. In the example in the link and partially copied below, there is a file with react code for the component I want to reuse. It looks like:

class DropDownCell extends GridCell {
    handleChange(e) {
        this.props.onChange({
            dataItem: this.props.dataItem,
            field: this.props.field,
            syntheticEvent: e.syntheticEvent,
            value: e.target.value
        });
    }
    render() {
        const value = this.props.dataItem[this.props.field];

        if (!this.props.dataItem.inEdit) {
            return (
                <td> {
                    (value === null) ? '' : this.props.dataItem[this.props.field].toString()}
                </td>
            );
        }

        return (
            <td>
                <DropDownList
                    style={{ width: "100px" }}
                    onChange={this.handleChange.bind(this)}
                    value={value}
                    data={[
                        { text: 'yes', value: true },
                        { text: 'no', value: false },
                        { text: '(empty)', value: null }
                    ]}
                    valueField="value"
                    textField="text"
                />
            </td>
        );
    }
}

Within the same file is a React class that implements the above component. The render method for that class looks like this:

render() {
    return (
        <div>
            <Grid
                data={this.state.data}
                itemChange={this.itemChange}
                editField="inEdit"
            >
                <GridColumn field="ProductID" title="Id" width="50px" editable={false} />
                <GridColumn field="ProductName" title="Product Name" />
                <GridColumn field="FirstOrderedOn" title="First Ordered" editor="date" format="{0:d}" />
                <GridColumn field="UnitsInStock" title="Units" editor="numeric" />
                <GridColumn field="Discontinued" cell={DropDownCell} />
            </Grid>
        </div>
    );
}

I want to pass data from the my Grid's parent component down through the grid to the DropDownCell component through props. But every time I try to create a separate DropDownCell file and import it to my Grid class, I can't get DropDownCell to work any more. What can I do to create a reusable react component from the DropDownCell class in its own file and get it to render within my grid?

score 0 · Answer 1 · answered Feb 27 '18 at 08:21

Make sure you export and import the class correctly. And also that you import all dependencies into the cell file as well. Here is full version of the file:

editorCell.js:

  import React from 'react';
  import ReactDOM from 'react-dom';
  import { GridCell } from '@progress/kendo-react-grid';
  import { DropDownList } from '@progress/kendo-react-dropdowns';

  export default class DropDownCell extends GridCell {
    handleChange(e) {
      this.props.onChange({
        dataItem: this.props.dataItem,
        field: this.props.field,
        syntheticEvent: e.syntheticEvent,
        value: e.target.value
      });
    }
    render() {
      const value = this.props.dataItem[this.props.field];

      if (!this.props.dataItem.inEdit) {
        return (
          <td> {
            (value === null) ? '' : this.props.dataItem[this.props.field].toString()}
          </td>
        );
      }

      return (
        <td>
          <DropDownList
            style={{ width: "100px" }}
            onChange={this.handleChange.bind(this)}
            value={value}
            data={[
              { text: 'yes', value: true },
              { text: 'no', value: false },
              { text: '(empty)', value: null }
            ]}
            valueField="value"
            textField="text"
          />
        </td>
      );
    }
  }

And in the top of the index.js, import the cell:

import DropDownCell from './editorCell.js';

Here is working version of the demo discussed above, but in separate files: https://stackblitz.com/edit/react-grid-dropdown-editor-separate

How to extract Kendo React Component into its own file

1 Answers1