{"id":7372,"date":"2019-08-29T21:08:46","date_gmt":"2019-08-29T21:08:46","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7372"},"modified":"2019-08-29T21:08:46","modified_gmt":"2019-08-29T21:08:46","slug":"storing-extra-data-within-your-html-elements-using-data-attributes","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/storing-extra-data-within-your-html-elements-using-data-attributes\/","title":{"rendered":"Storing extra data within your HTML elements using data-* attributes"},"content":{"rendered":"<p>I came across a simple problem, I have an array of objects in React with a name (something to display to the user) and an expression tree (which makes up a query associated with the name).<\/p>\n<p>What I wanted to do is that when a name is selected in a material-ui <em>Select<\/em> component, that it then passes the name and the expression data to a handler.<\/p>\n<p>Ofcourse there are several ways to achieve this but this is a really simply solution. We create an array of <em>MenuItem<\/em>&#8216;s for the <em>Select<\/em> and we store the expression tree along with the <em>MenuItem<\/em><\/p>\n<p>If you take a look at<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Howto\/Use_data_attributes#JavaScript_Access\" rel=\"noopener noreferrer\" target=\"_blank\"> Using data attributes<\/a> you&#8217;ll see that HTML5 has a way of adding attributes to an element using the data-* syntax.<\/p>\n<p>The name of the attribute to be added simply starts with <em>data-<\/em>, for example <em>data-expression<\/em> and now when the <em>Select onChange<\/em> event is handled, we can get at, not only the value selected but also the data attribute value.<\/p>\n<p>Here&#8217;s an example of us setting up a <em>MenuItem<\/em><\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nreturn &#x5B;{name: &quot;None&quot;, expression: undefined}]\r\n  .concat(publicQueries).map(e =&gt; {\r\n    return &lt;MenuItem key={e.name} \r\n      value={e.name} \r\n      data-expression={e.expression}&gt;{e.name}&lt;\/MenuItem&gt;\r\n});\r\n<\/pre>\n<p>Notice that we simply declare the data-expression and assign some data to it. Nothing special here.<\/p>\n<p>Now within the <em>onChange<\/em> handler of the <em>Select<\/em> component we might have a handler like this<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nhandleOnChange(e: any, child?: any) {\r\n   const selecteNamed = e.target.value;\r\n   const selectedExpression = child.props&#x5B;'data-expression'];\r\n   \/\/ do something useful with these\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I came across a simple problem, I have an array of objects in React with a name (something to display to the user) and an expression tree (which makes up a query associated with the name). What I wanted to do is that when a name is selected in a material-ui Select component, that it [&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":[42,243],"tags":[],"class_list":["post-7372","post","type-post","status-publish","format-standard","hentry","category-html","category-react"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7372","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=7372"}],"version-history":[{"count":4,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7372\/revisions"}],"predecessor-version":[{"id":7379,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7372\/revisions\/7379"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}