{"action":"closed","issue":{"url":"https://api.github.com/repos/material-components/material-components-web-react/issues/209","repository_url":"https://api.github.com/repos/material-components/material-components-web-react","labels_url":"https://api.github.com/repos/material-components/material-components-web-react/issues/209/labels{/name}","comments_url":"https://api.github.com/repos/material-components/material-components-web-react/issues/209/comments","events_url":"https://api.github.com/repos/material-components/material-components-web-react/issues/209/events","html_url":"https://github.com/material-components/material-components-web-react/issues/209","id":348107115,"node_id":"MDU6SXNzdWUzNDgxMDcxMTU=","number":209,"title":"Refactor element props to renderProps","user":{"login":"moog16","id":579873,"node_id":"MDQ6VXNlcjU3OTg3Mw==","avatar_url":"https://avatars2.githubusercontent.com/u/579873?v=4","gravatar_id":"","url":"https://api.github.com/users/moog16","html_url":"https://github.com/moog16","followers_url":"https://api.github.com/users/moog16/followers","following_url":"https://api.github.com/users/moog16/following{/other_user}","gists_url":"https://api.github.com/users/moog16/gists{/gist_id}","starred_url":"https://api.github.com/users/moog16/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/moog16/subscriptions","organizations_url":"https://api.github.com/users/moog16/orgs","repos_url":"https://api.github.com/users/moog16/repos","events_url":"https://api.github.com/users/moog16/events{/privacy}","received_events_url":"https://api.github.com/users/moog16/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-08-06T22:47:29Z","updated_at":"2018-10-01T18:29:36Z","closed_at":"2018-10-01T18:29:36Z","author_association":"CONTRIBUTOR","body":"Today we accept elements as props so that we can add classes, event handlers, etc. like so:\r\n\r\n```\r\n<Button icon={<i class='material-icon'>star</i>}>Click</Button>\r\n```\r\n\r\nA more extensible and future proof solution is to convert this pattern to renderProps:\r\n\r\n```\r\n<Button icon={({isFocused}) => <i class='material-icon'>{isFocused ? 'star' : 'favorite'</i>}>Click</Button>\r\n```\r\n\r\nrenderProps gives a lot more control to the user, while still allowing our components to do the work for them. The downside is that the user will have to be aware of these features (adding classes, adding event handlers, etc.), and add them to their rendered element."}}
{"actor":{"display_login":"moog16"}}