Component as Pop up Content

Question

I am creating a Pop up

  this.popUp = new mapboxgl.Popup({
    closeButton: true,
    closeOnClick: true,
    anchor: 'bottom-left',
  })
    .setLngLat(coordinates)
    .setHTML(
      '<span><p>Foo: Bar
      + <img class="pop-up-image" src=.../></span>'
    )
    .addTo(this.map);

The content of the Pop up I define the following

.setHTML(
      '<span><p>Foo: Bar
      + <img class="pop-up-image" src=.../></span>'
    )

Is there a way to pass a React.Component or a functional Component to the Pop up as content?

Answer 1

If possible, I'd go with React wrapper for mapbox-gl. According to the popup docs you can add any React component as Popup child. Otherwise the answer to your question would be this post, I believe

EDIT:

You may do it also in this way:

const placeholder = document.createElement('div');
ReactDOM.render(el, placeholder);

new mapboxgl.Popup({
  closeButton: true,
  closeOnClick: true,
  anchor: 'bottom-left',
})
.setLngLat(coordinates)
.setDOMContent(placeholder)
.addTo(this.map);

This should do the trick, hopefully.

Answer 2

If you need to maintain functionality of onClicks and other non-HTML aspects of the component you're hoping to render, Adam's suggestion will allow for that, vs some other posts suggesting the use of ReactDOMServer.renderToString(), which only outputs the HTML.