Persist panel sizes after re-render

When I update some child component of a panel, the panel is re-rendered with the initial sizes. I am sure that this is not working as intended, but I can’t find away past it.

I have tried to tie the onUpdate to a state change, figuring that I could catch the new sizes, and apply it to the component when react re-renders. However, it seems that onUpdate is triggered by the re-rendering, and I have a loop on my hands. onUpdate is triggered even before i tie the panelWidths to the state.

What am I doing wrong? I am fairly new to react and I might be missing some key insight here.

 windowResize(sizes) {
//setting the state to something, forcing a re-render, and then onUpdate triggers
       this.setState({test:"test"}); 
   }

render() { 
...
return <PanelGroup style={{height:"100%"}} borderColor="grey" onUpdate={this.windowResize} panelWidths={[
            {size: 100, minSize:50, resize: "dynamic"},
            {minSize:100, resize: "stretch"},
            {size: 100, minSize:50, resize: "dynamic"}]}>
...
</PanelGroup>
}

//I added this to stop an infinite loop. Counter defined elsewhere
 shouldComponentUpdate(nextProps, nextState) {
        counter++;
        return counter<100;
    }

[DanFessler]

Glad it helped 😃 Closing this issue

[DanFessler]

Alright, so I’d be very surprised if it was a child of the PanelGroup that was causing the re-render. Updating children shouldn’t change anything. But if you update the parent of a PanelGroup, and you’re defining your own panelWidths, then yes it will re-render and reset the widths unless you’re managing the widths of the PanelGroup in the parent’s state. I can probably streamline this in the future so this wouldn’t be necessary.

Hooking it up to state should be fairly painless. Instead of supplying the widths array directly as a prop, instead define it in the parent’s state and reference that array as your prop. Your onUpdate function should receive a new array, and setState on the parent with it to replace the old value.

Example:

let DefinedLayout = React.createClass({
  getInitialState: function() {
    return {
      counter: 0,
      panelWidths: [
        {size: 100, minSize:50, resize: "dynamic"},
        {minSize:100, resize: "stretch"},
        {size: 100, minSize:50, resize: "dynamic"}
      ]
    }
  },

  handleClick: function() {
    this.setState({counter: this.state.counter + 1});
  },

  handlePanelUpdate: function(widths) {
    this.setState({panelWidths: widths})
  },

  render: function() {
    return (
      <div style={{height: "100%"}}>
        <div><input type="button" value={"Update me: " + this.state.counter} onClick={this.handleClick}/></div>
        <PanelGroup borderColor="#DDD" spacing={2} onUpdate={this.handlePanelUpdate} panelWidths={this.state.panelWidths}>
          <Content>panel 1</Content>
          <Content>panel 2</Content>
          <Content>panel 3</Content>
        </PanelGroup>
      </div>
    )
  }
})