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.

is this the library you use ? github.com/TonyGermaneri/canvas-datagrid — Dane
– Dane, Commented Apr 6, 2018 at 9:28

Dane · Accepted Answer · 2018-04-06 09:32:57Z

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.

answered Apr 6, 2018 at 9:32

Dane

9,6135 gold badges38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Canvas-Datagrid within React Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related