Demo3 (todoList), TransitionMotion: "defaultStyles" and "styles" => got object, array expected

I’m adapting react-motion (stable) demos in our very new template app (meteor-react-es6), to transform each of them in a single component (ex: <DraggableList/>), using react-motion npm package and React.Component (instead of React.createClass).

So it only demands a syntax adaptation, but variables still the same…

The original file

demo3/

My component

here (shortcut to TransitionMotion)

Console

Warning: Failed propType: Invalid prop "defaultStyles" of type "object" supplied to "TransitionMotion", expected an array. Check the render method of "ListAnimated"

Warning: Failed propType: Invalid prop "styles" supplied to "TransitionMotion". Check the render method of "ListAnimated"

Error Uncaught TypeError: defaultStyles.map is not a function

Any idea guys??

[nkbt]

your code

  // actual animation-related logic
  getDefaultValue() {
    const {todos} = this.state;
    return Object.keys(todos)
      .reduce((configs, date) => {
        configs[date] = {
          height:  spring(0),
          opacity: spring(1),
          data:    todos[date],
        };
        return configs;
      }, {});
  }

original code

  getDefaultStyles() {
    return this.state.todos.map(todo => ({...todo, style: {height: 0, opacity: 1}}));
  },

getDefaultStyles returned array of styles. getDefaultValue returns object. Object does not have map method.

[nkbt]

@MadeInMoon ah, sorry, I thought you are going to PR these changes to react-motion.

I am closing this for now, feel free to ping me in https://gitter.im/nkbt/help or Reactiflux if you need more help!