https://codesandbox.io/s/4990z60 demo.js TransitionComponent={this.state.Transition} which refer to for example

function TransitionRight(props) {
  return <Slide {...props} direction="right" />;
}

[mui/snackbar
                 {:open true
                  :Transition-component (r/as-element [(r/adapt-react-class mui-core/Slide)
                                                       {:direction "right"}])
                  :style {:position "static"}
                  :anchor-origin {:vertical "bottom"
                                  :horizontal "left"}
                  :key id
                  ;:auto-hide-duration 3000
                  :on-close (fn [_ reason]
                              (when (= "timeout" reason)
                                (re-frame/dispatch [::notifications-events/remove id])))}
                 content]

Warning: Failed prop type: Invalid prop `TransitionComponent` of type `object` supplied to `Snackbar`, expected a component.

I was trying with as-component, fn, wrap [] and without etc. No luck.

@kwladyka try

:Transition-component (r/reactify-component (fn [props] [:> mui-core/Slide props]))
 :Transition-props {... whatever props... }

@valtteri thank you

wha the… is reactify-component hmm

as-element, as-component - i am confuse 🙂

Here’s an example of similar workaround with Dialog https://github.com/lipas-liikuntapaikat/lipas/blob/dev/webapp/src/cljs/lipas/ui/components/dialogs.cljs#L20-L31

> as-component is now as-element oh as-compontent should be deprecated! I got it.

Yeah I remember it took some head scratching to get those right. 🙂

Do you understand when use as-element vs reactify-component ?

I guess I can know this after error in console heh

https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html

But it looks like if I want to use function in parameters, then I shoudl use reactify-component

Maybe the easy way to put it is that when the API says a prop should be an element, use as-element and when the API says a prop should be a component, use reactify-component.

yeah, the easiest way is to read error messages probably 😉

@kwladyka @valtteri https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md have you seen this as well?

if not, may help shed some light

yes, I read it