{"action":"closed","issue":{"url":"https://api.github.com/repos/facebook/react/issues/8209","repository_url":"https://api.github.com/repos/facebook/react","labels_url":"https://api.github.com/repos/facebook/react/issues/8209/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/8209/comments","events_url":"https://api.github.com/repos/facebook/react/issues/8209/events","html_url":"https://github.com/facebook/react/issues/8209","id":187454206,"number":8209,"title":"Documentation: Sample is still using string refs","user":{"login":"snakajima","id":139827,"avatar_url":"https://avatars.githubusercontent.com/u/139827?v=3","gravatar_id":"","url":"https://api.github.com/users/snakajima","html_url":"https://github.com/snakajima","followers_url":"https://api.github.com/users/snakajima/followers","following_url":"https://api.github.com/users/snakajima/following{/other_user}","gists_url":"https://api.github.com/users/snakajima/gists{/gist_id}","starred_url":"https://api.github.com/users/snakajima/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/snakajima/subscriptions","organizations_url":"https://api.github.com/users/snakajima/orgs","repos_url":"https://api.github.com/users/snakajima/repos","events_url":"https://api.github.com/users/snakajima/events{/privacy}","received_events_url":"https://api.github.com/users/snakajima/received_events","type":"User","site_admin":false},"labels":[{"id":46581278,"url":"https://api.github.com/repos/facebook/react/labels/Component:%20Documentation%20&%20Website","name":"Component: Documentation & Website","color":"eb6420","default":false}],"state":"closed","locked":false,"assignee":{"login":"lacker","id":106475,"avatar_url":"https://avatars.githubusercontent.com/u/106475?v=3","gravatar_id":"","url":"https://api.github.com/users/lacker","html_url":"https://github.com/lacker","followers_url":"https://api.github.com/users/lacker/followers","following_url":"https://api.github.com/users/lacker/following{/other_user}","gists_url":"https://api.github.com/users/lacker/gists{/gist_id}","starred_url":"https://api.github.com/users/lacker/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lacker/subscriptions","organizations_url":"https://api.github.com/users/lacker/orgs","repos_url":"https://api.github.com/users/lacker/repos","events_url":"https://api.github.com/users/lacker/events{/privacy}","received_events_url":"https://api.github.com/users/lacker/received_events","type":"User","site_admin":false},"assignees":[{"login":"lacker","id":106475,"avatar_url":"https://avatars.githubusercontent.com/u/106475?v=3","gravatar_id":"","url":"https://api.github.com/users/lacker","html_url":"https://github.com/lacker","followers_url":"https://api.github.com/users/lacker/followers","following_url":"https://api.github.com/users/lacker/following{/other_user}","gists_url":"https://api.github.com/users/lacker/gists{/gist_id}","starred_url":"https://api.github.com/users/lacker/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lacker/subscriptions","organizations_url":"https://api.github.com/users/lacker/orgs","repos_url":"https://api.github.com/users/lacker/repos","events_url":"https://api.github.com/users/lacker/events{/privacy}","received_events_url":"https://api.github.com/users/lacker/received_events","type":"User","site_admin":false}],"milestone":null,"comments":3,"created_at":"2016-11-04T22:45:22Z","updated_at":"2016-11-10T14:13:56Z","closed_at":"2016-11-10T14:13:56Z","body":"Sample code \"Step 5: Add Inverse Data Flow\" in Quick Start/Thinking in React is still using old string refs. \r\n\r\n```\r\n  handleChange() {\r\n    this.props.onUserInput(\r\n      this.refs.filterTextInput.value,\r\n      this.refs.inStockOnlyInput.checked\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <form>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"Search...\"\r\n          value={this.props.filterText}\r\n          ref=\"filterTextInput\"\r\n          onChange={this.handleChange}\r\n        />\r\n        <p>\r\n          <input\r\n            type=\"checkbox\"\r\n            checked={this.props.inStockOnly}\r\n            ref=\"inStockOnlyInput\"\r\n            onChange={this.handleChange}\r\n          />\r\n          {' '}\r\n          Only show products in stock\r\n        </p>\r\n      </form>\r\n    );\r\n  }\r\n```\r\n\r\nI think it's better (easier to understand) to use a new syntax.\r\n\r\n```\r\n  handleChange() {\r\n    this.props.onUserInput(\r\n      this.filterTextInput.value,\r\n      this.inStockOnlyInput.checked\r\n    );\r\n  }\r\n\r\n  ...\r\n     ref={(input) => this.filterTextInput = input}\r\n  ...\r\n     ref={(input) => this.inStockOnlyInput = input}\r\n```"}}
{"actor":{"display_login":"gaearon"}}