Using Canvas-Datagrid within React Component

Question

I am trying to incorporate ' canvas-datagrid ' module into React. However, I keep on getting this error:

Uncaught Error: Objects are not valid as a React child (found: [object HTMLElement]). If you meant to render a collection of children, use an array instead. ... in grid (created by CanvasGrid)...

The code is a slight modified version of the one on the React example :

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import CanvasDataGrid from 'canvas-datagrid';

class CanvasGrid extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const args = {};
    this.grid = ReactDOM.findDOMNode(this);
    this.updateAttributes();
  }
  componentWillReceiveProps(nextProps) {
    this.updateAttributes(nextProps);
  }
  shouldComponentUpdate() {
    return false;
  }
  componentWillUnmount() {
    this.grid.dispose();
  }
  updateAttributes(nextProps) {
    Object.keys(this.props).forEach(key => {
      if (!nextProps || this.props[key] !== nextProps[key]) {
        if (this.grid.attributes[key] !== undefined) {
          this.grid.attributes[key] = nextProps ? nextProps[key] : this.props[key];
        } else {
          this.grid[key] = nextProps ? nextProps[key] : this.props[key];
        }
      }
    });
  }
  render() {
    return (
      <div>
        <CanvasDataGrid />;
      </div>
    );
  }
}
export default CanvasGrid;

As per my understanding of the example, there isn't anything special to be done, however, the error above is encountered when React tries to render <CanvasDataGrid> component.

Answer 1

The npm package canvas-datagrid exports a Web Component , not a react component. You have to render that component in your UI using react.
What you have to do is include the script in your index.html and then create a React component CanvasGrid with a render function:

render() {
    return React.createElement('canvas-datagrid', {});
}

For full component code, see this file .