{"action":"opened","issue":{"url":"https://api.github.com/repos/maihuynhtruc/learnReactJS/issues/8","repository_url":"https://api.github.com/repos/maihuynhtruc/learnReactJS","labels_url":"https://api.github.com/repos/maihuynhtruc/learnReactJS/issues/8/labels{/name}","comments_url":"https://api.github.com/repos/maihuynhtruc/learnReactJS/issues/8/comments","events_url":"https://api.github.com/repos/maihuynhtruc/learnReactJS/issues/8/events","html_url":"https://github.com/maihuynhtruc/learnReactJS/issues/8","id":317270436,"number":8,"title":"Functional Components","user":{"login":"maihuynhtruc","id":36816608,"avatar_url":"https://avatars0.githubusercontent.com/u/36816608?v=4","gravatar_id":"","url":"https://api.github.com/users/maihuynhtruc","html_url":"https://github.com/maihuynhtruc","followers_url":"https://api.github.com/users/maihuynhtruc/followers","following_url":"https://api.github.com/users/maihuynhtruc/following{/other_user}","gists_url":"https://api.github.com/users/maihuynhtruc/gists{/gist_id}","starred_url":"https://api.github.com/users/maihuynhtruc/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/maihuynhtruc/subscriptions","organizations_url":"https://api.github.com/users/maihuynhtruc/orgs","repos_url":"https://api.github.com/users/maihuynhtruc/repos","events_url":"https://api.github.com/users/maihuynhtruc/events{/privacy}","received_events_url":"https://api.github.com/users/maihuynhtruc/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-04-24T15:08:10Z","updated_at":"2018-04-24T15:08:10Z","closed_at":null,"author_association":"OWNER","body":"\r\nWe’ve removed the constructor, and in fact, React supports a simpler syntax called functional components for component types like Square that only consist of a render method. Rather than define a class extending React.Component, simply write a function that takes props and returns what should be rendered.\r\n\r\nReplace the whole Square class with this function:\r\n\r\nfunction Square(props) {\r\n  return (\r\n    <button className=\"square\" onClick={props.onClick}>\r\n      {props.value}\r\n    </button>\r\n  );\r\n}\r\nYou’ll need to change this.props to props both times it appears. Many components in your apps will be able to be written as functional components: these components tend to be easier to write and React will optimize them more in the future.\r\n\r\nWhile we’re cleaning up the code, we also changed onClick={() => props.onClick()} to just onClick={props.onClick}, as passing the function down is enough for our example. Note that onClick={props.onClick()} would not work because it would call props.onClick immediately instead of passing it down."}}
{"actor":{"display_login":"maihuynhtruc"}}