title: Programmatically change height/width of items in react-grid-layout
body: <p>Is there a way to programmatically change <code>w</code> and <code>h</code> of an item's layout? The use case is to have a "collapse" button which reduces the height to a constant height, enough to leave the header of the item. To do this my original idea was to keep <code>layouts</code> in the state of the component and manually change the height of the collapsed item/s to another constant height.</p>
  
  <p>However it seems as though the library will ignore changes to <code>layout</code> after initial rendering. Is this the case or is it a bug on my end? And if it's normal behavior, is there another way to change heights programmatically?</p>
  
  <p>Here's a standalone component that implements the <code>react-grid-layout</code>. It's two "widgets" that have an onClick handler to "collapse" them. By setting the state, it triggers the re-render and recalculates layouts so that any collapsed items have a reduced height. The console log statments show that the rendered components have the correct new layout but it does not get reflected on the screen, leading me to believe there is another reference to the height.</p>
  
  <p><a href="http://jsfiddle.net/dj0s3fwb/" rel="noreferrer">jsFiddle example</a></p>
  
  <pre><code>import React, { Component } from 'react';
  
  import GridLayout, { WidthProvider } from 'react-grid-layout';
  const Grid = WidthProvider(GridLayout);
  
  // # WidgetsContainer
  // Container WidgetsContainer component.
  class WidgetsContainer extends Component {
  
      static defaultProps = {
          isDraggable: true,
          isResizable: true,
          rowHeight: 1,
          cols: 12,
      }
  
      constructor(props) {
          super(props);
          this.state = {
              layouts: [
                  {
                      i: 'item_1',
                      x: 0,
                      y: 0,
                      w: 5,
                      h: 25,
                  }, {
                      i: 'item_2',
                      x: 5,
                      y: 0,
                      w: 7,
                      h: 30,
                  },
              ],
              collapsedWidgets: {},
          };
      }
  
      toggleWidget(id) {
          return () =&gt; {
              const newState = {...this.state.collapsedWidgets};
              const collapsed = typeof newState[id] === 'boolean' ? newState[id] : false;
  
              newState[id] = !collapsed;
              this.setState({
                  collapsedWidgets: newState,
              });
          }
  
      }
  
      onResize(layouts) {
          this.setState({
              layouts,
          });
      }
  
      getModifiedLayouts() {
          const { layouts, collapsedWidgets } = this.state;
  
          const newLayouts = layouts.map(layout =&gt; {
              const newLayout = { ...layout };
              if (collapsedWidgets[newLayout.i]) {
                  newLayout.h = 5;
              }
              return newLayout;
          });
  
          return newLayouts;
      }
  
      getWidgets() {
          const widgets = [{
              component: &lt;div style={{ height: '250px', background: 'lightgray' }}&gt;Content&lt;/div&gt;,
              title: 'Item 1',
              id: 'item_1',
          }, {
              component: &lt;div style={{ height: '310px', background: 'lightgray' }}&gt;Content 2&lt;/div&gt;,
              title: 'Item 2',
              id: 'item_2',
          }];
          return widgets;
      }
  
      generateDOM() {
          const widgets = this.getWidgets();
  
          const modifiedLayouts = this.getModifiedLayouts();
  
          return widgets.map((widget, i) =&gt; {
              return (&lt;div key={i} _grid={modifiedLayouts[i]}&gt;
                  &lt;div style={{ background: 'gray' }} onClick={::this.toggleWidget(widget.id)}&gt;
                      {widget.title}
                      {widget.component}
                  &lt;/div&gt;
              &lt;/div&gt;);
          });
      }
  
      render() {
          const widgets = this.generateDOM();
          console.log(widgets[0].props._grid)
          return (&lt;div style={{ marginTop: '15px' }}&gt;
                  {widgets ? &lt;Grid className="layout"
                    {...this.props}
                    onResizeStop={::this.onResize}
                  &gt;
                      {widgets}
                  &lt;/Grid&gt; : null}
              &lt;/div&gt;);
      }
  }
  
  export default WidgetsContainer;
  </code></pre>