Difficulty with 3rd party components

[bkjohnson]

I'm using a <Popup> element from Semantic UI and I'm using it in a custom element like this:

<Popup trigger={<Button>click me</Button>}>
      <SecondElement></SecondElement>
</Popup>

I'd also like to do something similar on the rails side of things so in a view I'm calling the helper like this:

react_component('Popup', { trigger: react_component('Button', { content: 'click me'}), content: react_component('SecondElement') })

However, after I add Popup to my WebpackerReact.setup() call I get errors in a dependency saying that Element type is invalid.. Given the errors, is passing React components as properties like this not supported?

[renchap]

This is indeed not supported. react_component renders a <div> element with some data- properties, and the JS webpacker-react part will call ReactDOM.render for each of these elements at page load.

This would be very hard to handle these use-cases and I am not sure this is the best approach. I would encourage you to create a new component that renders your <Popup> with the button and the other elements, and then use react_component to render it from Rails.

[bkjohnson]

Thanks for letting me know, I'll use a wrapper component like you suggested.