How to get reference auto generated elements in React?

Question

I am currently working with react but I am now stuck with an error that I don't know how to fix. I am using mCustomScroll bar and this library automatically generates an element with the id of MCSB_1. This means that I can't attach a "ref" to it. The only element that I can attach is a ref to is the parent element to the auto generated element.

For example my structure is as follows;

componentDidMount()  {
   $(this.refs.messagesPanel).mCustomScrollbar();  //The mCustomScrollbar is a plugin
}

render()  {
    return (
        <div id="messagesPanel" ref="messagesPanel"></div>
   );
}

The problem is: that when I call mCustomScrollbar(); the plugin auto generates a div in messagesPanel which I do not know how to access:

<div id="messagesPanel">
    <div id="MCSB_1"></div>
</div>

Basically, i'm asking how do I access the "MCSB_1" if I can't attach a ref to it.

Thanks!

Answer 1

One option could be using jQuery's find function from your messagePanel object

componentDidMount() {
 ...
}
someFunction() {
  let yourElement = $(this.refs.messagesPanel).find('#MCSB_1');
}