How to pass the event with a parameter to onClick in React
In this post we will give you information about How to pass the event with a parameter to onClick in React. Hear we will give you detail about How to pass the event with a parameter to onClick in ReactAnd how to use it also give you demo for it if it is necessary.
Learn, how to pass the event object with a parameter to the onClick event handler in react.
In a react component, we can pass the parameter to the onClick event handler by using an arrow function which is calling the event handler with parameter.
Example:
function Welcome() { const checkOut = (name) => { alert('Hello ${name}'); } return ( <div> <button onClick={() => checkOut('Gowtham')}>Greet</button> </div> )}export default Welcome;But, how can we pass both the event object and parameter?
We can do it like this.
function Welcome() { const checkOut = (e, name) => { e.preventDefault(); alert('Hello ${name}'); } return ( <div> <button onClick={() => checkOut(e,'Gowtham')}>Greet</button> </div> )}export default Welcome;In the above code, first we passed event object then parameter value to the checkOut() function.
Hope this code and post will helped you for implement How to pass the event with a parameter to onClick in React. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs