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! _How to make use of one of React Components’ most powerful features!_hackernoon.com The Road to React Mastery — Handling Events _State in React is an incredibly powerful feature of class-based components and is somewhat similar to props with a few…_hackernoon.com The Road to React Mastery — Understanding State 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 which takes a parameter 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. displayMessage 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 (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. message We then added the function to our button, which activates whenever clicked (pretty self explanatory). onClick To then reference our function and pass in our message as the parameter, we use the , our event handler name, in this case, is . This binds the instance of (the component) to the function, as it is not done automatically by React, thus calling or would result in null. this.eventhandler.bind(this, parameters) displayMessage this this.props this.state 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!

Keep

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Passing Arguments to Event Handlers in React— The Easy Way

Too Long; Didn't Read

Companies Mentioned

Ethan Hansen

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Passing Arguments to Event Handlers in React— The Easy Way

Too Long; Didn't Read

Companies Mentioned

Ethan Hansen

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES