Difficulty with 3rd party components
Closed this issue · 2 comments
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?
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.
Thanks for letting me know, I'll use a wrapper component like you suggested.