react-grid-layout example Unknown prop `_grid` on <div> tag

Question

I'm trying to implement react-grid-layout. All of the examples pass the grid item configuration through a _grid div property:

createElement(el) {
  ...
  return (
    <div key={i} _grid={el}>
      ...
    </div>
  );
},

In my implementation:

return (
  <div key={i} _grid={el}>
    <DashboardTestWidget widgetName={el.name} menuName={this.props.menuName}/>
    <span className="remove" style={removeStyle} onClick={this.onRemoveItem.bind(this, i)}>x</span>
  </div>
)

I get an error:

dashboard_view.browserify.browserified.js:1216 Warning: Unknown prop `_grid` on <div> tag. Remove this prop from the element. For details, see <URL ommitted because SO complained about URL shorteners>
  in div (created by DashboardLayout)
  in Resizable (created by GridItem)
  in DraggableCore (created by GridItem)
  in GridItem (created by ReactGridLayout)
  in div (created by ReactGridLayout)
  in ReactGridLayout (created by ResponsiveReactGridLayout)
  in ResponsiveReactGridLayout (created by _class)
  in _class (created by DashboardLayout)
  in div (created by DashboardLayout)
  in DashboardLayout

I'm fairly new to React. What am I doing wrong?

---

Relevant npm package versions I use:

"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-grid-layout": "^0.12.7",

Answer 1

This is a change that React made to their code base around May this year. See this pull request for more information on this.

The reason you are getting this error is because you are trying to render a none HTML recognised attribute.

In HTML5 you need to define custom attributes using data-*.

To prevent the warning from showing in your case, you will have to change your render method to this.

return (
    <div key={i} data-grid={el}>
        <DashboardTestWidget widgetName={el.name} menuName={this.props.menuName}/>
        <span className="remove" style={removeStyle} onClick={this.onRemoveItem.bind(this, i)}>x</span>
    </div>
);

Note that _grid has been changed to data-grid which react will now recognise as a valid HMTL attribute.

One thing to note with React is that it will allow you to pass custom props to custom components, but when you render those components to HTML, they need to be valid HTML attributes.