If you want to track events such as links and button clicks, or transactions like eCommerce purchases, you’ll need to manually set up tracking for each event or transaction. Unfortunately, setting up event tracking in Google Analytics is somewhat tricky, so newbies can get lost quickly. In this 'onclick popup' tutorial, we will show you how to add a form to a popup, trigger it with the click of a button, and close upon clicking the 'Submit'.
In React, the onClick handler allows you to call a function and perform an action when an element is clicked. onClick is the cornerstone of any React app.
Click on any of the examples below to see code snippets and common uses:
If you’re new to React, I suggest you read our excellent beginner tutorial: Build a Todo App in React Using Hooks
What is the React onClick Event Handler?
Whenever you need to perform an action after clicking a button, link, or pretty much any element, you’ll use the onClick event handler.
Therefore, the onClick event handler is one of the most powerful and most used tools in your React tool belt.
Let’s look at some examples of how we can use the onClick event handler in React.
Example: Call a Function After Clicking a Button
The simple App component above has one function called sayHello(), and a single button.
The button inside the React component has an onClick event handler attached to it, pointing to our sayHello() function. Doing so will trigger the function every time you click the button.
How do we trigger the sayHello() function? By passing in the name of the function you want to call inside the curly braces, after the event handler:
Common Mistakes
Notice how we only pass the name of the function to the event handler and not the name followed by parentheses. Parentheses after a function name executes the function.
In other words, if we passed in the function with parentheses, the function will execute every time the component renders.
Creating A Button In Wordpress
We do not want to execute a function inside of the event handler.
✅ Good
❌ Bad
Example: Call an Inline Function in an onClick Event Handler
An inline function is a function which is defined inside of the onClick handler when the React Component renders.
It’s created on render because the function definition is inside of the onClick handler, which is inside of the component render method (or return, in the case of functional React components).
You’d use an inline function to pass in additional arguments to a function, such as a value from a loop, or the target button’s value. Let’s take a look at an example:
Common Mistakes
A common mistake when using inline functions is not including parentheses after the function name.
Unlike calling a function that’s not inline, one that’s defined inside of the component’s body, we need to execute the function if it’s inline.
✅ Good
❌ Bad
Example: Call Multiple Functions in an onClick Event Handler
You may find yourself wanting to call multiple functions after clicking a button. For example, updating a component’s state and simultaneously showing an alert.
There are multiple ways to do this:
- Running a block of code inside the onClick handler
- Calling multiple functions inside the onClick handler
Let’s start with defining a block of code inside of the onClick handler itself:
As the example above shows, it is possible to define a block of code inside of the onClick handler. However, depending on the amount of code that you want to run, the block scope can be difficult to read.
Similarly, calling multiple functions inside of the onClick handler is also possible:
Again, the code above is not as readable as it could be if we just called the sayHello function and set the state inside of that. However, there may be instances when you need to do the above.
Example: Updating the State in an onClick Event Handler
A very common use of an inline function inside of an onClick event handler in React is to update a component’s state.
You’ll do this when you want to update the state with the button’s value, or using a value from a loop, for example. Let’s take a look at how we can update the state inside of an onClick event handler:
Continue learning about updating state in React components through the onClick event handler in Simplifying React State and the useState Hook.
Example: Pass a Button Value to an Inline Function
Another common use of an inline function is to pass in a button’s value as an argument. This is also very common when using input elements and the onChange event handler.
Take a look at the example below. Notice the value e that’s returned from the onClick event handler:
The value e is what’s called a SyntheticEvent. Every event handler is passed a SyntheticEvent, which is an object that contains useful metadata related to the event, such as the target element’s value.
The code above accesses just that, the target element’s value, and shows it inside a browser alert. The e.target.value is originating from the value attribute that’s on the actual button element.
Take some time to explore the SyntheticEvent further as there are more useful values inside of it. You could start by console logging e out and clicking through the object.
Example: Pass a Value from an Array to an Inline Function
The final example we’ll explore is how to pass in a value from an array to an inline function that’s inside of the onClick event handler.
One common use of arrays in React is to render multiple components per item in the array.
For example, an admin dashboard which displays a list of users and provides admins with the ability to edit or delete users:
The code above first defines a new array called users with a list of first names. Then, it loops through those names, rendering a list and button element for each value inside the array.
Finally, it passes in the name from the array as an argument of the deleteUserWithName function.
Like Button Wordpress
1 Build a React Switch Toggle Component
3 How React Reignited My Love for Web Development
5 Simplifying React State and the useState Hook
The WordPress visual editor is a fine tool for most articles. And it’s only getting better with every subsequent revision. However, not all blog posts are dominated by plaintext. Sometimes when you need to add more complex objects to your posts such as images with specific attributes, I-frames, and most importantly – code, the visual editor starts to lack finesse. For this reason, many individuals prefer to either write or at least modify their code using the HTML editor marked by the “Text” tab.
Using this, content creators can insert very specific HTML tags and style their elements the way they please. Since the visual editor merely guesses what you actually wish to display, there’s a lot of room for error. The HTML editor delivers pinpoint accuracy and I myself use it on a regular basis. However, many individuals find the list of tags above the editor to be somewhat insufficient. These are the buttons that I’m referring to:
Everyone’s needs are different, so the WordPress team has only included those tags which it thinks will be of most value to everyone. However, in the spirit of WordPress’s flexibility, they have also provided us a means of adding custom tags of our own. For example, say you have a specific class that you want to include on specific HTML elements. You can create a WordPress “Quicktag” that provides you with a button outputting any kind of opening and closing tags you want.
Let’s take a look at how to do this using two tags that I regularly use – pre, and div.
Adding Quicktags
Quicktags in the WordPress editor are not generated via PHP, but via JavaScript instead. This means that we won’t be using PHP functions but rather JavaScript ones. Specifically, we’re going to manipulate the object called QTags that gets created whenever its functionality is called for on the editing screen. The JavaScript file responsible for creating QTags is called “quicktags”. So we first check whether or not the “quicktags” JavaScript file is enqueued and ready via:
Once you’re satisfied that the script has been loaded, we use the following Javascript function below to generate a new button. In this example, I’m creating a “pre” tag
This calls the “addButton” function of Qtags to add a new button. You can get the complete documentation of the function on the WordPress Codex page. Only the first two arguments are required, namely the HTML ID and the string to be displayed on the button. The next two arguments provide the opening and closing tags. The one after that deals with something called an “accesskey” and has been deprecated, so I leave it blank, and the “Pre tag” is the pop-up that appears when you hover over the button. Finally, we have the “priority” number which indicates the position at which you want the button to appear. Putting all of this together, we have the final piece of code here:
I hook into the ” admin_print_footer_scripts” action tag and output a piece of JavaScript code – note how I close the PHP tags in between and reopen them for the ending brackets. You can add this either to a functions.php file or any place where you insert custom PHP code. After I save my changes, I get the following output on my HTML editor:
Wordpress Button Click Event Template
And you can see below that pressing the “div” button outputs the opening <div> complete with my custom class and everything.
For those who constantly need to create special custom HTML tags for large parts of their posts, the Quicktags functionality is tremendously useful.