{"action":"opened","issue":{"url":"https://api.github.com/repos/drcmda/react-spring/issues/24","repository_url":"https://api.github.com/repos/drcmda/react-spring","labels_url":"https://api.github.com/repos/drcmda/react-spring/issues/24/labels{/name}","comments_url":"https://api.github.com/repos/drcmda/react-spring/issues/24/comments","events_url":"https://api.github.com/repos/drcmda/react-spring/issues/24/events","html_url":"https://github.com/drcmda/react-spring/issues/24","id":313845856,"number":24,"title":"Mapping an array for Trail throws an error","user":{"login":"samrith-s","id":9032162,"avatar_url":"https://avatars3.githubusercontent.com/u/9032162?v=4","gravatar_id":"","url":"https://api.github.com/users/samrith-s","html_url":"https://github.com/samrith-s","followers_url":"https://api.github.com/users/samrith-s/followers","following_url":"https://api.github.com/users/samrith-s/following{/other_user}","gists_url":"https://api.github.com/users/samrith-s/gists{/gist_id}","starred_url":"https://api.github.com/users/samrith-s/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samrith-s/subscriptions","organizations_url":"https://api.github.com/users/samrith-s/orgs","repos_url":"https://api.github.com/users/samrith-s/repos","events_url":"https://api.github.com/users/samrith-s/events{/privacy}","received_events_url":"https://api.github.com/users/samrith-s/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-04-12T18:51:25Z","updated_at":"2018-04-12T18:51:25Z","closed_at":null,"author_association":"NONE","body":"Hey guys,\r\n\r\nFirst off, loved what you guys are doing with Spring. Looks very very promising! Now to the issue (☹️), I went through the examples and found `Trail` most suitable for my purpose.\r\n\r\nMy code for the Trail component is something like this:\r\n```js\r\nimport React, { Component } from 'react';\r\nimport { Trail, config, animated, template } from 'react-spring';\r\n\r\nimport MoreInfo from '../../MoreInfo';\r\nimport RevenueBlock from './blocks/RevenueBlock';\r\nimport StatsBlock from './blocks/StatsBlock';\r\n\r\nexport default class TrailingComponent extends Component {\r\n    state = {\r\n        blocks: ['item-1', 'item-2', 'item-3']\r\n    };\r\n\r\n    getBlock = number => {\r\n        switch (number) {\r\n            case 1: {\r\n                return <RevenueBlock />;\r\n            }\r\n\r\n            case 2: {\r\n                return <MoreInfo />;\r\n            }\r\n\r\n            case 3: {\r\n                return <StatsBlock />;\r\n            }\r\n        }\r\n    };\r\n\r\n    render() {\r\n        const { blocks } = this.state;\r\n\r\n        return (\r\n            <div>\r\n                <Trail\r\n                    native\r\n                    config={config.gentle}\r\n                    from={{ opacity: 0, x: 100 }}\r\n                    to={{ opacity: 1, x: 0 }}\r\n                    keys={blocks.map(block => block)}\r\n                >\r\n                    {blocks.map((graph, index) => ({ x, opacity }) =>\r\n                        <animated.div\r\n                            style={{\r\n                                opacity,\r\n                                transform: template`translate3d(${x}%,0,0)`\r\n                            }}\r\n                        >\r\n                            {this.getBlock(index + 1)}\r\n                        </animated.div>\r\n                    )}\r\n                </Trail>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n```\r\nThe three blocks (`Revenue`, `MoreInfo`, `Stats`) are just `div` with nothing fancy in them.\r\n\r\nWhenever `TrailingComponent` mounts, I get this error:\r\n*A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.*\r\n![image](https://user-images.githubusercontent.com/9032162/38697704-53a0f696-3eb0-11e8-8290-42dd679a1212.png)\r\n\r\nCan you guys help me out on what I'm missing here?\r\n"}}
{"actor":{"display_login":"samrith-s"}}