title: React, redux and react-motion
body: <p>In APP:</p>
  
  <pre><code>&lt;FramesCollection&gt;
        &lt;Frames1 speed='1.0' width='auto' zIndex='1' /&gt;
        &lt;Frames2 speed='1.2' width='auto' zIndex='1' /&gt;
        &lt;Frames3 speed='1.4' width='auto' zIndex='1' /&gt;
        &lt;Frames4 speed='1.6' width='auto' zIndex='1' /&gt;
        &lt;Frames5 speed='2.0' width='auto' zIndex='4' /&gt;
        &lt;Frames6 speed='2.5' width='auto' zIndex='3' /&gt;
        &lt;Rails /&gt;
  &lt;/FramesCollection&gt;
  </code></pre>
  
  <p>In FramesCollection:</p>
  
  <pre><code>    render() {
          const { selectedItem, menuItems } = this.props.bottomMenu
          const col = menuItems.length
          const springSettings = { stiffness: 170, damping: 26 };
  
          return (
              &lt;aside className='frames-collection' ref='framesCollection'&gt;
  
                  {React.Children.map(
                      this.props.children,
                      (child, i) =&gt; {
                          if ('speed' in child.props) {
  
                              const width = Math.round(child.props.speed * col * 2000)
                              const style = { width: width, translateX: spring(-width * selectedItem, springSettings) }
  
                              return &lt;Motion key={i} style={style}&gt;
                                  {child}
                              &lt;/Motion&gt;
  
                          } else {
                              return child;
                          }
                      })
                  }
  
              &lt;/aside&gt;
          )
      }
  </code></pre>
  
  <p>The code is compiled without errors, but in the addition of the browser I see 2 errors:</p>
  
  <blockquote>
    <p>Warning: Failed prop type: Invalid prop <code>children</code> of type <code>object</code>
    supplied to <code>Motion</code>, expected <code>function</code>. in Motion (created by
    FramesCollection) in FramesCollection (created by
    Connect(FramesCollection)) in Connect(FramesCollection) (created by
    App) in div (created by App) in App (created by Connect(App)) in
    Connect(App) in div in Provider</p>
  </blockquote>
  
  <p>And </p>
  
  <blockquote>
    <p>Uncaught TypeError: this.props.children is not a function at
    Object.render (Motion.js:235) at ReactCompositeComponent.js:796 at
    measureLifeCyclePerf (ReactCompositeComponent.js:75) at
    ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext
    (ReactCompositeComponent.js:795) at
    ReactCompositeComponentWrapper._renderValidatedComponent
    (ReactCompositeComponent.js:822) at
    ReactCompositeComponentWrapper.performInitialMount
    (ReactCompositeComponent.js:362) at
    ReactCompositeComponentWrapper.mountComponent
    (ReactCompositeComponent.js:258) at Object.mountComponent
    (ReactReconciler.js:46) at ReactDOMComponent.mountChildren
    (ReactMultiChild.js:238) at ReactDOMComponent._createInitialChildren
    (ReactDOMComponent.js:697)</p>
  </blockquote>
  
  <p>What am I doing wrong?</p>