{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/13005","repository_url":"https://api.github.com/repos/facebook/react","labels_url":"https://api.github.com/repos/facebook/react/issues/13005/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/13005/comments","events_url":"https://api.github.com/repos/facebook/react/issues/13005/events","html_url":"https://github.com/facebook/react/issues/13005","id":330805573,"node_id":"MDU6SXNzdWUzMzA4MDU1NzM=","number":13005,"title":"Error because of missing key","user":{"login":"ghernando","id":5342043,"node_id":"MDQ6VXNlcjUzNDIwNDM=","avatar_url":"https://avatars1.githubusercontent.com/u/5342043?v=4","gravatar_id":"","url":"https://api.github.com/users/ghernando","html_url":"https://github.com/ghernando","followers_url":"https://api.github.com/users/ghernando/followers","following_url":"https://api.github.com/users/ghernando/following{/other_user}","gists_url":"https://api.github.com/users/ghernando/gists{/gist_id}","starred_url":"https://api.github.com/users/ghernando/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ghernando/subscriptions","organizations_url":"https://api.github.com/users/ghernando/orgs","repos_url":"https://api.github.com/users/ghernando/repos","events_url":"https://api.github.com/users/ghernando/events{/privacy}","received_events_url":"https://api.github.com/users/ghernando/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-06-08T21:17:03Z","updated_at":"2018-06-08T22:30:18Z","closed_at":"2018-06-08T22:30:18Z","author_association":"NONE","body":"I'm using Gatsby and am new to both Gatsby and React.\r\nI'm seeing the following warning and would like to remove it.  I've read about the key, and I am trying to apply it, but it doesn't work.\r\n\r\nWarning: Each child in an array or iterator should have a unique \"key\" prop.\r\n\r\n> Check the top-level render call using <CardGroup>. See https://fb.me/react-warning-keys for more information.\r\n>     in Unknown\r\n>     in Unknown (created by ComponentRenderer)\r\n>     in ComponentRenderer (created by Route)\r\n>     in Route (created by DefaultLayout)\r\n>     in div (created by DefaultLayout)\r\n>     in div (created by SidebarPusher)\r\n>     in SidebarPusher (created by DefaultLayout)\r\n> ...\r\n\r\n**MyPage.tsx**\r\nThis is the main page.  It passes a value of slug obtained from GraphQL.\r\n\r\n    export default(props: CardProps) => {\r\n    const mycards = props.data.frontmatter.edges\r\n         .map(({ node }) => {\r\n            const Logo = node.frontmatter.image.children[0] as ImageSharp;\r\n            return (\r\n            <MyCard slug={node.fields.slug} />\r\n          );\r\n       }) ;\r\n    \r\n        ...\r\n        return(\r\n          <Container>\r\n              <Card.Group itemsPerRow={3} stackable={true}>\r\n                   {mycards}\r\n              </Card.Group>\r\n           </Container>\r\n        );\r\n     );\r\n\r\n\r\n**MyCard.tsx**\r\nThis is where the key is specified on the card\r\n\r\n     interface CardProps extends React.HTMLProps<HTMLDivElement> {\r\n       slug: string;\r\n     }\r\n    \r\n     export default ({slug}: CardProps) => {\r\n       return (\r\n           <Card key={slug}>\r\n             <Card.Content>\r\n               <Card.Header>\r\n    ...\r\n             </Card.Content>\r\n           </Card> \r\n        );\r\n     );"},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/395909402","html_url":"https://github.com/facebook/react/issues/13005#issuecomment-395909402","issue_url":"https://api.github.com/repos/facebook/react/issues/13005","id":395909402,"node_id":"MDEyOklzc3VlQ29tbWVudDM5NTkwOTQwMg==","user":{"login":"aweary","id":6886061,"node_id":"MDQ6VXNlcjY4ODYwNjE=","avatar_url":"https://avatars2.githubusercontent.com/u/6886061?v=4","gravatar_id":"","url":"https://api.github.com/users/aweary","html_url":"https://github.com/aweary","followers_url":"https://api.github.com/users/aweary/followers","following_url":"https://api.github.com/users/aweary/following{/other_user}","gists_url":"https://api.github.com/users/aweary/gists{/gist_id}","starred_url":"https://api.github.com/users/aweary/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aweary/subscriptions","organizations_url":"https://api.github.com/users/aweary/orgs","repos_url":"https://api.github.com/users/aweary/repos","events_url":"https://api.github.com/users/aweary/events{/privacy}","received_events_url":"https://api.github.com/users/aweary/received_events","type":"User","site_admin":false},"created_at":"2018-06-08T22:30:18Z","updated_at":"2018-06-08T22:30:18Z","author_association":"MEMBER","body":"@ghernando you're applying the key to the `Card` component, which is a child of `MyCard`. You need to apply the key to the `MyCard` component that's being mapped to.\r\n\r\n```jsx\r\n<MyCard key={node.fields.slug} />\r\n```\r\n\r\nFor future reference we use the issue tracker for bug reports and feature requests only.\r\n\r\nIf you have a question, please check our community support resources:\r\nhttps://facebook.github.io/react/community/support.html"}}
{"actor":{"display_login":"aweary"}}