{"id":7002,"date":"2019-05-10T21:41:11","date_gmt":"2019-05-10T21:41:11","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7002"},"modified":"2019-05-10T21:41:11","modified_gmt":"2019-05-10T21:41:11","slug":"connecting-event-handlers-to-react-components-using-typescript","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/connecting-event-handlers-to-react-components-using-typescript\/","title":{"rendered":"Connecting event handlers to React components using TypeScript"},"content":{"rendered":"<p>In the previous post we created React components which we can pass attributes\/properties to. As TypeScript aims to make JavaScript type safe we need to ensure the correct types are expected and passed, so for example here&#8217;s some code from the <a href=\"https:\/\/reactjs.org\/tutorial\/tutorial.html\" rel=\"noopener noreferrer\" target=\"_blank\">TicTacToe tutorial<\/a> on the React site, but in this example we&#8217;re passing an event handler property from the Board component to the Square component, where it&#8217;s wired up to the button<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\ninterface SquareProperties {value: number, onclick: (ev: React.MouseEvent&lt;HTMLButtonElement&gt;) =&gt; void};\r\n\r\nclass Square extends Component&lt;SquareProperties, {}&gt; {\r\n  render() {\r\n    return (\r\n      &lt;button className=&quot;square&quot; onClick={this.props.onclick}&gt;\r\n        {this.props.value}\r\n      &lt;\/button&gt;\r\n    );\r\n  }\r\n}\r\n\r\nclass Board extends Component {\r\n  renderSquare(i: number) {\r\n    return &lt;Square value={i} onclick={() =&gt; alert('click')}\/&gt;;\r\n  }\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>In the previous post we created React components which we can pass attributes\/properties to. As TypeScript aims to make JavaScript type safe we need to ensure the correct types are expected and passed, so for example here&#8217;s some code from the TicTacToe tutorial on the React site, but in this example we&#8217;re passing an event [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[243],"tags":[],"class_list":["post-7002","post","type-post","status-publish","format-standard","hentry","category-react"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7002","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7002"}],"version-history":[{"count":4,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7002\/revisions"}],"predecessor-version":[{"id":7025,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7002\/revisions\/7025"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}