{"action":"closed","issue":{"url":"https://api.github.com/repos/uber/react-vis/issues/861","repository_url":"https://api.github.com/repos/uber/react-vis","labels_url":"https://api.github.com/repos/uber/react-vis/issues/861/labels{/name}","comments_url":"https://api.github.com/repos/uber/react-vis/issues/861/comments","events_url":"https://api.github.com/repos/uber/react-vis/issues/861/events","html_url":"https://github.com/uber/react-vis/issues/861","id":338784194,"node_id":"MDU6SXNzdWUzMzg3ODQxOTQ=","number":861,"title":"Stateless function components cannot be given refs. Attempts to access this ref will fail","user":{"login":"nabinked","id":7703179,"node_id":"MDQ6VXNlcjc3MDMxNzk=","avatar_url":"https://avatars3.githubusercontent.com/u/7703179?v=4","gravatar_id":"","url":"https://api.github.com/users/nabinked","html_url":"https://github.com/nabinked","followers_url":"https://api.github.com/users/nabinked/followers","following_url":"https://api.github.com/users/nabinked/following{/other_user}","gists_url":"https://api.github.com/users/nabinked/gists{/gist_id}","starred_url":"https://api.github.com/users/nabinked/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nabinked/subscriptions","organizations_url":"https://api.github.com/users/nabinked/orgs","repos_url":"https://api.github.com/users/nabinked/repos","events_url":"https://api.github.com/users/nabinked/events{/privacy}","received_events_url":"https://api.github.com/users/nabinked/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":{"login":"benshope","id":3506088,"node_id":"MDQ6VXNlcjM1MDYwODg=","avatar_url":"https://avatars1.githubusercontent.com/u/3506088?v=4","gravatar_id":"","url":"https://api.github.com/users/benshope","html_url":"https://github.com/benshope","followers_url":"https://api.github.com/users/benshope/followers","following_url":"https://api.github.com/users/benshope/following{/other_user}","gists_url":"https://api.github.com/users/benshope/gists{/gist_id}","starred_url":"https://api.github.com/users/benshope/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/benshope/subscriptions","organizations_url":"https://api.github.com/users/benshope/orgs","repos_url":"https://api.github.com/users/benshope/repos","events_url":"https://api.github.com/users/benshope/events{/privacy}","received_events_url":"https://api.github.com/users/benshope/received_events","type":"User","site_admin":false},"assignees":[{"login":"benshope","id":3506088,"node_id":"MDQ6VXNlcjM1MDYwODg=","avatar_url":"https://avatars1.githubusercontent.com/u/3506088?v=4","gravatar_id":"","url":"https://api.github.com/users/benshope","html_url":"https://github.com/benshope","followers_url":"https://api.github.com/users/benshope/followers","following_url":"https://api.github.com/users/benshope/following{/other_user}","gists_url":"https://api.github.com/users/benshope/gists{/gist_id}","starred_url":"https://api.github.com/users/benshope/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/benshope/subscriptions","organizations_url":"https://api.github.com/users/benshope/orgs","repos_url":"https://api.github.com/users/benshope/repos","events_url":"https://api.github.com/users/benshope/events{/privacy}","received_events_url":"https://api.github.com/users/benshope/received_events","type":"User","site_admin":false}],"milestone":null,"comments":6,"created_at":"2018-07-06T02:28:46Z","updated_at":"2018-07-11T10:59:24Z","closed_at":"2018-07-11T10:59:24Z","author_association":"NONE","body":"Following errors thrown while trying to render a Line Chart from the demo [here](https://raw.githubusercontent.com/uber/react-vis/master/showcase/plot/line-chart.js).\r\n\r\n![Image](https://preview.ibb.co/mjEmCJ/Capture.png)\r\n\r\n### Steps to reproduce\r\n- Create a new react app using CRA\r\n- Add react-vis to dependencies\r\n- Create a Component with following content\r\n```js\r\n\r\nimport React from 'react';\r\n\r\nimport {\r\n  XYPlot,\r\n  XAxis,\r\n  YAxis,\r\n  HorizontalGridLines,\r\n  VerticalGridLines,\r\n  LineSeries\r\n} from 'react-vis';\r\n\r\nexport default class Example extends React.Component {\r\n  render() {\r\n    return (\r\n      <XYPlot\r\n        width={300}\r\n        height={300}>\r\n        <HorizontalGridLines />\r\n        <VerticalGridLines />\r\n        <XAxis title=\"X Axis\" position=\"start\"/>\r\n        <YAxis title=\"Y Axis\"/>\r\n        <LineSeries\r\n          className=\"first-series\"\r\n          data={[\r\n            {x: 1, y: 3},\r\n            {x: 2, y: 5},\r\n            {x: 3, y: 15},\r\n            {x: 4, y: 12}\r\n          ]}/>\r\n        <LineSeries\r\n          className=\"second-series\"\r\n          data={null}/>\r\n        <LineSeries\r\n          className=\"third-series\"\r\n          curve={'curveMonotoneX'}\r\n          style={{\r\n            strokeDasharray: '2 2'\r\n          }}\r\n          data={[\r\n            {x: 1, y: 10},\r\n            {x: 2, y: 4},\r\n            {x: 3, y: 2},\r\n            {x: 4, y: 15}\r\n          ]}\r\n          strokeDasharray=\"7, 3\"\r\n          />\r\n        <LineSeries\r\n          className=\"fourth-series\"\r\n          data={[\r\n            {x: 1, y: 7},\r\n            {x: 2, y: 11},\r\n            {x: 3, y: 9},\r\n            {x: 4, y: 2}\r\n          ]}/>\r\n      </XYPlot>\r\n    );\r\n  }\r\n}\r\n```\r\n- Import it to App.js\r\n```js\r\nimport React, { Component } from 'react';\r\nimport LineChart from './LineChart';\r\nimport './App.css';\r\n\r\nclass App extends Component {\r\n  render() {\r\n    return (\r\n      <LineChart />\r\n    );\r\n  }\r\n}\r\n\r\nexport default App;\r\n```\r\n- Do a `yarn start` and see the console.\r\n\r\n- package.json\r\n```json\r\n{\r\n  \"name\": \"my-app\",\r\n  \"version\": \"0.1.0\",\r\n  \"private\": true,\r\n  \"dependencies\": {\r\n    \"react\": \"^16.4.1\",\r\n    \"react-dom\": \"^16.4.1\",\r\n    \"react-scripts\": \"1.1.4\",\r\n    \"react-vis\": \"^1.10.1\"\r\n  },\r\n  \"scripts\": {\r\n    \"start\": \"react-scripts start\",\r\n    \"build\": \"react-scripts build\",\r\n    \"test\": \"react-scripts test --env=jsdom\",\r\n    \"eject\": \"react-scripts eject\"\r\n  }\r\n}\r\n```\r\n\r\nMy guess is that the `XYPlot` component in function [`_getClonedChildComponents`](https://github.com/uber/react-vis/blob/c6b155f3ae01c023e258fd9221aa512bc7a2e592/src/plot/xy-plot.js#L426) is adding [`ref`](https://github.com/uber/react-vis/blob/c6b155f3ae01c023e258fd9221aa512bc7a2e592/src/plot/xy-plot.js#L445) to the props of the child components, while the children can easily be SFCs (In the example above the components `HorizontalGridLines`,`VerticalGridLines`,`XAxis`,`YAxis` are all SFC inside `XYPlot` component, hence the 4 exceptions) and in that case the exception is thrown.\r\n"}}
{"actor":{"display_login":"benshope"}}