Clojurians Log v2

I’m struggling to understand the interop between react components, state and children. I’m trying to reproduce the simple first example here http://reactcommunity.org/react-transition-group/transition.

import { Transition } from 'react-transition-group';

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
}

const transitionStyles = {
  entering: { opacity: 1 },
  entered:  { opacity: 1 },
  exiting:  { opacity: 0 },
  exited:  { opacity: 0 },
};

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {state => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        I'm a fade Transition!
      </div>
    )}
  </Transition>
);

(def default-style {:transition "opacity 200ms ease-in-out"
                      :opacity    0})

(def transition-styles {:entering {:opacity 1}
                        :entered  {:opacity 1}
                        :exiting  {:opacity 0}
                        :exited   {:opacity 0}})

(def transition (interop/react-factory Transition))

(defsc my-modal [this {:ui/keys [modal-open?]}]
  {:query [:ui/modal-open?]}
  (transition {:in modal-open?
               :timeout 300}
    (div {:style (merge default-style #_"how do I access state as per the jsx example")})))

Of course there is a perfectly good example in the book to get me where I needed to be http://book.fulcrologic.com/#_the_function_as_a_child_pattern

I’ll go with that approach unless anyone has a better suggestion.

have you tried passing a function to the transition instead of the div? you should be able to use the code in the book as a starter

@danvingo Yes. That’s what the example in the book does. Thanks.