Fork me on GitHub
#reagent
<
2017-03-23
>
torkan04:03:13

Hi! What is the syntax for passing another component into another component as a named prop?

torkan04:03:07

I have a React component expecting another React component handed to it in a prop named "trigger". What might be worth mentioning is that both components are pure JS-components acquired by inter-op. Using them with the [:> <component> {:prop-name <prop-value>}]-syntax works fine, as long as the props are strings and other basic types.

gadfly36107:03:34

@torkan take a look at the example in this readme, which passes a component to a trigger prop: https://github.com/gadfly361/soda-ash/blob/master/README.md

gadfly36107:03:56

It wraps the component with (reagent/as-element ...)

gadfly36107:03:10

Not sure if that is what you'll need, but worth a try

torkan09:03:59

Considering it is semantic I'm trying to get started with, I think it's as dead on as it gets 😊 Thanks!

torkan11:03:05

@gadfly361 Checked it out now, worked as a charm!

torkan12:03:09

@gadfly361: Have you tried the Popup-component? It doesn't seem to adhere to the position prop, the internal state is not updated as when doing it in JS

kenny22:03:02

I am struggling with React's css transition group & reagent. I have a simple page switcher:

(def CSSTransitionGroup
  (reagent/adapt-react-class js/React.addons.CSSTransitionGroup))

[:div
 [:button {:on-click #(swap! question-id inc)} "next page"]
 [CSSTransitionGroup {:transition-name        "pageChange"
                      :transitionEnterTimeout 500
                      :transitionLeaveTimeout 300}
  [:div {:key @question-id}
   (get pages @question-id)]]]
When I click the button, I get Uncaught TypeError: Cannot read property 'findDOMNode' of null. From line 593 in react-with-addons.inc.js which looks like this:
var node = ReactAddonsDOMDependencies.getReactDOM().findDOMNode(this);
If I remove the CSSTransitionGroup my pages will switch correctly. Has anyone encountered this issue before?

gadfly36122:03:14

@kenny I think it is the version of react you are using, see this issue: https://github.com/reagent-project/reagent/issues/290

gadfly36122:03:01

@torkan, i haven't tried the popup-component. If i have some time, i'll try and ping you if i come up with anything helpful

kenny22:03:43

@gadfly361 Yup, that sure sounds like my problem. Is this a bug in Reagent then?

gadfly36122:03:51

I'm not sure, I haven't explored it yet (still on a previous version of react, so havent felt enough pain to spur me into research) .. but it is something that is nice to track, even if the problem is upstream

kenny22:03:50

Yup, I was also able to confirm it works on 15.4.1-0 and not on 15.4.2-2.