DEV Community

Ali Bahaari
Ali Bahaari

Posted on • Updated on

How to combine event methods in one in React.js?

React.js

Consider you have multiple buttons having several handleClick methods as below:

<button onClick={handleClick1}>Lorem Ipsum 1</button>
<button onClick={handleClick2}>Lorem Ipsum 2</button>
<button onClick={handleClick3}>Lorem Ipsum 3</button>
...
Enter fullscreen mode Exit fullscreen mode

Thus, what's the problem?! You may have faced it! Consider if you have 100 buttons, you should declare 100 handleClick methods!

Let me show you a simple and elegant way for the problem above.

Use name Attribute

Due to w3schools.com defintion:

the name attribute specifies a name for an HTML element and can be used to reference the element in JavaScript.

Therefore first, I rewrite the code above and two important changes will be in your sights:

  1. One method has been declared for onClick events called handleClick
  2. I've used name attribute along with different values
<button onClick={handleClick} name="LI1">Lorem Ipsum 1</button>
<button onClick={handleClick} name="LI2">Lorem Ipsum 2</button>
<button onClick={handleClick} name="LI3">Lorem Ipsum 3</button>
...
Enter fullscreen mode Exit fullscreen mode

Then, I write handleClick method:

const handleClick = (e) => {
    (e.current.name === "LI1") ? (DO SOMETHING 1) :
    (e.current.name === "LI2") ? (DO SOMETHING 2) :
    (e.current.name === "LI3") ? (DO SOMETHING 3) :
    ... :
    (Else);
}
Enter fullscreen mode Exit fullscreen mode

Boom! Now compare the code above with the another one. Simplicity and optimization are shining and working like a charm indeed! :)

You can or may want to connect with me through the networks I've put on my website: Ali Bahaari's Website

Discussion (1)