Passing Arguments to Event Handlers in React— The Easy Way

In our previous instalment, we explored Event Handlers, State and Mutating State. If you need some refreshing on those concepts, feel free to re-read through the articles that are linked below!

The Road to React Mastery — Handling Events_How to make use of one of React Components’ most powerful features!_hackernoon.com

The Road to React Mastery — Understanding State_State in React is an incredibly powerful feature of class-based components and is somewhat similar to props with a few…_hackernoon.com

When using React, you’ll find yourself constantly building event handlers for components, as such is the dynamic nature of React. In many of those cases, you will need to pass a parameter to that event handler. When I was initially learning React, I found this task confusing, and didn't quite understand what did and didn’t need to be completed. I don’t want you to experience the same frustration that I did, so here I will be showing you one simple, efficient and workable way to pass parameters to React Event Handlers.

Background Knowledge

If you’re reading this and don’t know what Event Handlers or parameters are, I highly recommend backtracking to some of my previous articles and working your way up to this point. Either way, for the sake of being thorough I’ll give some tl;dr explanations of their main concepts.

Event Handlers — Basically React component’s private functions, declared within the react Component’s class declaration.

Parameters — information you give a function (event handler), that it then acts on.

All caught up? Great! Let’s get started.

Setting Up Our Class

class RandomFunction extends React.Component {render() {return <button>Press to hear your message.</button>;}}

So far, pretty simple. A basic React component, that has a button. That’s it. Nothing to complicated. Let’s now add an event handler!

Adding the Event Handler

class RandomFunction extends React.Component {render() {return <button>Press to hear your message.</button>;}

displayMessage(message) {console.log(message)}}

Still pretty simple. We’ve added an event handler displayMessage which takes a parameter message and then logs it to the console. Now all we need to do is tie the button to the event handler, and feed it our very own, little message.

Putting it all Together

let message = "Hey there!";class RandomFunction extends React.Component {render() {return <button onClick={this.displayMessage.bind(this,message)}>Press to hear your message.</button>;}

displayMessage(message) {console.log(message)}}

That may look a lot more complicated, but it really isn’t. Let me break it down for you.

• First, we created our message in message (I know, very creative!) and stored it in the global scope. Obviously, this isn’t very practical, however, for the sake of this tutorial, it will suffice. As long as the variable can be referenced by the component, it will work.
• We then added the onClick function to our button, which activates whenever clicked (pretty self explanatory).
• To then reference our function and pass in our message as the parameter, we use the this.eventhandler.bind(this, parameters), our event handler name, in this case, is displayMessage. This binds the instance of this (the component) to the function, as it is not done automatically by React, thus calling this.props or this.state would result in null.

There you have it! A simple and easy way to pass in arguments to an event handler! If you have any questions, feel free to ask! If you liked the article, follow me to keep updated on my daily posts!

Thanks for reading!