React Component in the Portal (Legacy)

[hatpick]

Here's what I have:

// mobx observables
@observable private _active: boolean = false;
@observable private _data: string[] = [];
private _togglePortal = (show: boolean) => {
   this._active = show; 
}
private _getData = () => {
   // simulate netwpork delay
   setTimeout(() => this._data = ['random', 'data', 'goes', 'here'], 2000);
}
// ....
// in my render
<Portal active={this._active} >
   <ComponentA data={this._data()}/>
</Portal>
// ...
// at somepoint I call toggle to show the portal, let's assume it's a mouse event
// ...
    this._togglePortal(true);
// ...

The problem is when I call my toggle to show the portal, the component inside it doesn't show the latest data received as props. Any ideas?

[uforic]

Hey @hatpick and @tajo , I just ran into this, and have a fix; here was the problematic code:

componentWillReceiveProps(props) {
    this.renderPortal();
  }

Render portal gets called, but this is before the new props are received. I'm game to fix this in a variety of ways, but the easy one liner was changing componentWillReceiveProps to componentDidUpdate.

I'm about to make a PR for this, @tajo let me know what you think. #187

[hatpick]

@uforic It doesn't work for me, are you using mobx or state?

[uforic]

Hm, I'm using state - but this was an issue with showing the latest props, not state related; if you put a breakpoint in LegacyPortal.jsx / componentWillReceiveProps, you should be able to see the state of the children about to be rendered (in the props.children variable), and verify that when this.renderPortal gets called, it's using the previous props that have an older version of the children.

Definitely possible there is something else going on, but if the behavior you're seeing is props are running "a little behind", this could be it.

[hatpick]

actually, I take my last comment back, your fix work. ty