Passing false as props.children to Transition is ok, but passing undefined isn't

[azangru]

In the example of a single child passed conditionally to the Transition component that you give in the README:

// Animate a modal
<Transition
  component={false} // don't use a wrapping component
  enter={{
    opacity: 1,
    translateY: spring(0, {stiffness: 400, damping: 10})
  }}
  leave={{
    opacity: 0,
    translateY: 250
  }}
>
  { this.state.modalOpen &&
    <div key="modal" className="modal__content">
      // modal code
    </div>
  }
</Transition>

it is not immediately obvious that Transition will happily accept false as a child, but will actually break if the falsy value is undefined (or null, for that matter). The danger lies in this line of the Transition component:

https://github.com/souporserious/react-motion-ui-pack/blob/master/src/Transition.jsx#L66

React's Children.map returns an empty array if passed false as children, but returns undefined when passed undefined, and null when passed null. If that happens, the TransitionMotion component will receive undefined (or null) as the styles prop here, which will break the component.

This can be easily fixed by returning either the result of Children.map, or an empty array if that result is null or undefined from the _getStyles function.