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:
- One method has been declared for
onClick
events calledhandleClick
- 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
Top comments (0)