{"id":2270,"date":"2019-10-15T01:55:15","date_gmt":"2019-10-15T01:55:15","guid":{"rendered":"http:\/\/upmostlymulti.onpressidium.com\/?p=2270"},"modified":"2021-10-28T11:01:18","modified_gmt":"2021-10-28T16:01:18","slug":"pass-a-parameter-through-onclick-in-react","status":"publish","type":"post","link":"http:\/\/upmostly.com\/tutorials\/pass-a-parameter-through-onclick-in-react","title":{"rendered":"Pass a Parameter Through onClick in React"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

A common thing you will want to learn in React is how to pass a value as a parameter through the onClick<\/strong> event handler. Read on to learn how!<\/p>\n\n\n\n

App.js<\/div>
import<\/span> React from<\/span> 'react'<\/span>;<\/span>\n\nconst<\/span> ExampleComponent<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n  \n  function<\/span> sayHello<\/span>(<\/span>name)<\/span> {<\/span>\n    alert<\/span>(<\/span>`hello, <\/span>${<\/span>name}<\/span><\/span>`<\/span><\/span>)<\/span>;<\/span>\n  }<\/span>\n  \n  return<\/span> (<\/span>\n    <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> sayHello<\/span>(<\/span>'James'<\/span>)<\/span>}<\/span><\/span>><\/span><\/span>Greet<\/span><\/<\/span>button<\/span>><\/span><\/span>\n  )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> ExampleComponent;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
For those who want the TL;DR and go straight to the code, take a look at the example above \u261d\ufe0f.<\/p><\/blockquote>\n\n\n\n
ExampleComponent<\/strong> is a very simple React component that contains one button and one function.<\/p>\n\n\n\n
To understand how to pass a value as a parameter through an onClick event handler<\/a>, take a look at the line of code inside of the return statement. It’s a single button with one event handler: onClick<\/em><\/strong>.<\/p>\n\n\n\n
Typically, to call a function when we click a button in React, we would simply pass in the name of the function to the onClick<\/strong> handler, like so:<\/p>\n\n\n\n
Calling a function without a parameter<\/div>
...<\/span>\n  return<\/span> (<\/span>\n    <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>sayHello}<\/span><\/span>><\/span><\/span>Greet<\/span><\/<\/span>button<\/span>><\/span><\/span>\n  )<\/span>;<\/span>\n...<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
Notice how in the ExampleComponent<\/strong> code above, we pass in more than just the function name.<\/p>\n\n\n\n
In order to pass a value as a parameter through the onClick<\/strong> handler we pass in an arrow function which returns a call to the sayHello<\/em><\/strong> function.<\/p>\n\n\n\n
In our example, that argument is a string: ‘James<\/em>‘:<\/p>\n\n\n\n
...<\/span>\n  return<\/span> (<\/span>\n    <<\/span>button onClick=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> sayHello<\/span>(<\/span>'James'<\/span>)<\/span>}<\/span>><\/span>Greet<<\/span>\/<\/span>button><\/span>\n  )<\/span>;<\/span>\n...<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
It’s this trick of writing an inline arrow function inside of the onClick<\/strong> handler which allows us to pass in values as a parameter in React.<\/p>\n\n\n\n
Let’s explore some more common examples!<\/p>\n\n\n\n
Pass a Button’s Value as a Parameter Through the onClick Event Handler<\/h2>\n\n\n\n
You might want to pass in the value or name of the button or input element through the event handler.<\/p>\n\n\n\n
...<\/span>\n  return<\/span> (<\/span>\n    <<\/span>button value=<\/span>\"blue\"<\/span> onClick=<\/span>{<\/span>e =><\/span> changeColor<\/span>(<\/span>e.<\/span>target.<\/span>value)<\/span>}<\/span>><\/span>Color Change<<\/span>\/<\/span>button><\/span>\n  )<\/span>;<\/span>\n...<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
The button now has an additional attribute, named value. We can get access to the button’s attributes in its event handlers by accessing the event through the event handler.<\/p>\n\n\n\n
The example above shows the variable e<\/em> <\/strong>that is provided from the onClick event handler. This stands for event<\/strong><\/em>. Once we have the event, we can access values such as the value or name attribute.<\/p>\n\n\n\n
To learn more about the onClick<\/strong> event handler read my tutorial on the onClick Event Handler (With Examples)<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
A common thing you will want to learn in React is how to pass a value as a parameter through the onClick event handler. Read on to learn how!<\/p>\n","protected":false},"author":8,"featured_media":2288,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[33,4,39],"class_list":["post-2270","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-beginner-react-tutorials","tag-react","tag-react-event-handlers"],"acf":[],"_links":{"self":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/2270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/comments?post=2270"}],"version-history":[{"count":2,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/2270\/revisions"}],"predecessor-version":[{"id":3539,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/2270\/revisions\/3539"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media\/2288"}],"wp:attachment":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media?parent=2270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/categories?post=2270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/tags?post=2270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}