Using container element the right way

[CAYdenberg]

VirutalList attempts to directly add the needed event listeners directly to the DOM element. I have found this can cause the error Cannot read property addEventListener of null in certain cases, because componentDidMount on the virtual list is being called before the parent has rendered.

Is there any obvious work-around for this or is there something wrong with our lifecycle management?

[developerdizzle]

Hmm, nothing obvious comes to mind. Would you be able to post the relevant code, and also your exact version of React? I'd love to take a closer look.

[developerdizzle]

@CAYdenberg Do you happen to have any more info around this?

[CAYdenberg]

We've worked around and aren't using refs. I will close this for now and let you know if I come across it again.

[developerdizzle]

Thanks @CAYdenberg - I'm going to come up with another demo implementation just to be sure things are working properly.

[Shaked]

Hey @CAYdenberg - may I ask how did you solve this issue?

@developerdizzle - will you have time to add another demo with a default container (on load)?

[CAYdenberg]

Like we aren't using refs currently. IIRC, we needed it to set the scrollbar, but we worked around by just using window scroll and reworking some other element positioning.

If I circle back to this at some point I'll be sure to update this.

[studentIvan]

+1 to this issue, even it's closed

[muhammad-saleh]

I spent a lot of time to get this working correctly but I couldn't unfortunately the only thing I could think of (couldn't get it to work though) is to use a closure to only initialize the list once and call it from the render method (after the refs has been updated)

and everytime you call the this method again it will return a reference to the initalized list

[muhammad-saleh]

I slept on it and found a solution,

I initialized the list in ComponentDidMount where you have access to the refs And saved the list in the state

  componentDidMount() {
    this.setState({
      VList: VirtualList({
        container: this.refs.usersContainerRef,
      })(this.listOptions),
    });
  }

and in the render method I used the initialized component:

<this.state.VList items={} itemHeight={} />

and it worked!