How to combine event methods in one in 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>
...

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>
...

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);
}

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