3

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",
CWSites
  • 1,428
  • 1
  • 19
  • 34
Csaba Toth
  • 10,021
  • 5
  • 75
  • 121

1 Answers1

5

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.

Enijar
  • 6,387
  • 9
  • 44
  • 73
  • Changing `_grid` to `data-grid` made the error go away, but now the `h` and `w` I set for each `el` don't seem to apply and all dashboard item shrinks to `1x1` on load. This will be the good direction just the framework has to pick up the `w` and `h` (and other attributes). – Csaba Toth Jul 14 '16 at 16:05
  • Hmmm, in the debugger I see `data-grid="[object Object]"`. I guess I have to JSON serialize? – Csaba Toth Jul 14 '16 at 17:04
  • Even if I JSON stringify, `data-grid="{"i":"0","x":0,"y":0,"w":6,"h":4,"add":false,"name":"react_test_bar_graph"}"` is not picked up – Csaba Toth Jul 14 '16 at 17:34
  • Tried also `var propBag = { 'data-grid': `{x: ${el.x}, y: ${el.y}, w: ${el.w}, h: ${el.h}}` };` and then `
    `.
    – Csaba Toth Jul 14 '16 at 21:02
  • The only way I could get it to work is: `var propBag = { '_grid': el };` and then `
    `. It's a mystery looking at this why `
    ` doesn't work. I'll either write an own answer or you can correct yours if you think it's acceptable.
    – Csaba Toth Jul 14 '16 at 21:04
  • Actually, I still see the warning, but at least it's working. – Csaba Toth Jul 14 '16 at 21:50
  • I don't mark this answer, because changing it to data-grid prevents the widget item data to reach the framework. Using _grid causes a warning but things still work – Csaba Toth Jul 15 '16 at 18:39
  • Looks like a commit retired _grid and now uses data-grid. So pretty soon your answer will be correct. https://github.com/vpezeshkian/react-grid-layout/commit/d35e24754b13f8d8223a2b37ae72162fe08c880c – Csaba Toth Jul 31 '16 at 21:23
  • 1
    The new react-grig-layout now doesn't have this – Csaba Toth Oct 06 '16 at 21:18