title: react-grid-layout How can I resize components on the grid?
body: <p>I tried using a custom component with react-grid-layout. However, I could not get it working.
  When I put the component inside a div, I can resize that div, but the component itself is not resized with it.
  When I put the component inside the grid tags directly, I can't resize or move it at all and the borders of the grid are not matching the borders of the component either.</p>
  
  <p>Here's the code for my index.js:</p>
  
  <pre><code>function App() {
  return (
  &lt;div className="App" style={{ background: "grey" }}&gt;
    &lt;GridLayout className="layout" cols={16} rowHeight={10} width={500}&gt;
      &lt;div key="a" data-grid={{ x: 0, y: 0, w: 5, h: 10 }}&gt;
        &lt;TestComponent
          style={{
            color: "green",
            height: "auto",
            width: "auto",
            background: "red"
          }}
        /&gt;
      &lt;/div&gt;
  
      &lt;div
        key="b"
        data-grid={{ x: 5, y: 0, w: 3, h: 3 }}
        style={{ background: "green" }}
      &gt;
        this works fine
      &lt;/div&gt;
  
      &lt;TestComponent
        key="c"
        data-grid={{ x: 1, y: 0, w: 2, h: 2 }}
        style={{
          color: "blue",
          height: "auto",
          width: "auto",
          background: "black"
        }}
      /&gt;
    &lt;/GridLayout&gt;
  &lt;/div&gt;
  );
  }
  </code></pre>
  
  <p>I have uploaded the full example, including the TestComponent, on code sandbox:
  <a href="https://codesandbox.io/s/7zl7mm90m0" rel="nofollow noreferrer">https://codesandbox.io/s/7zl7mm90m0</a></p>
  
  <p>How can I implement a custom component properly on the grid?</p>
  
  <p>Best regards,</p>
  
  <p>W.</p>