I feel like in the last couple of months, I have learned a lot about Javascript.

I'm still way more confident in Ruby and I think that comes more natural to me, but my JS is getting better.

JS has always been a struggle for me.

Spent much of the day debugging and trying to figure out how to get a React element to properly render on a DOM element that's not a part of the natural tree. It's actually been a massive pain point for me in the project, and I know the current implementation is really bad and not scalable.

The issue is the library that I'm using exposes a DOM element, and I need to attach a React component to that and pass data to it, as well as let that data update and keep flowing through to that.

But after HOURS of digging and trying to understand, I finally had a breakthrough.

The best solution I've found is to save that exposed element to state and then use a React.Portal, like this:

The onClick listener that exposes a DOM element:

onClick: function(event) {
  this.setState({specialEl: event.dropdown.el})

   event.dropdown.once('destroy', () => (
     this.setState({specialEl: null})
    ));
}

And then in the render method, you can do something like this:

return(
  <div>
     // regular React app
    {this.state.specialEl &&
       return(
         ReactDOM.createPortal(
            <div>data displayed in the special element</div>,
            this.state.specialEl
          )
       )
    }
  </div>
)

^^ This is a bit of pseudo-code.

I was so stoked when I got this working, feels like a bit of a breakthrough especially because I struggle so much with JS.