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}&g…


This content originally appeared on DEV Community and was authored by Ali Bahaari

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) : (Else);
    (e.current.name === "LI2") ? (DO SOMETHING 2) : (Else);
    (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 in my website: Ali Bahaari's Website


This content originally appeared on DEV Community and was authored by Ali Bahaari


Print Share Comment Cite Upload Translate Updates
APA

Ali Bahaari | Sciencx (2021-11-15T18:16:08+00:00) How to combine event methods in one in React.js?. Retrieved from https://www.scien.cx/2021/11/15/how-to-combine-event-methods-in-one-in-react-js/

MLA
" » How to combine event methods in one in React.js?." Ali Bahaari | Sciencx - Monday November 15, 2021, https://www.scien.cx/2021/11/15/how-to-combine-event-methods-in-one-in-react-js/
HARVARD
Ali Bahaari | Sciencx Monday November 15, 2021 » How to combine event methods in one in React.js?., viewed ,<https://www.scien.cx/2021/11/15/how-to-combine-event-methods-in-one-in-react-js/>
VANCOUVER
Ali Bahaari | Sciencx - » How to combine event methods in one in React.js?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/15/how-to-combine-event-methods-in-one-in-react-js/
CHICAGO
" » How to combine event methods in one in React.js?." Ali Bahaari | Sciencx - Accessed . https://www.scien.cx/2021/11/15/how-to-combine-event-methods-in-one-in-react-js/
IEEE
" » How to combine event methods in one in React.js?." Ali Bahaari | Sciencx [Online]. Available: https://www.scien.cx/2021/11/15/how-to-combine-event-methods-in-one-in-react-js/. [Accessed: ]
rf:citation
» How to combine event methods in one in React.js? | Ali Bahaari | Sciencx | https://www.scien.cx/2021/11/15/how-to-combine-event-methods-in-one-in-react-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts