How to set an event handler in a React subcomponent
React.js is an interactive library that provides a runtime response to the user. Its component-based architecture supports event propagation by which we can propagate the parent component events to their subcomponents through event handlers.
What is an event handler?
Event handling refers to initiating a response corresponding to the change that occurs at run time. React provides a range of built-in event handlers that improve user interactivity and generate a desired response for them.
onClick: triggered when an element is clicked.
onSubmit: triggered when a form is submitted.
onFocus: triggered when an element is focused.
onBlur: triggered when an element is unfocused.
onChange: triggered when the value of an element is changed.
Simple steps to set event handler in React subcomponent
Step 1: Create a parent component in the React src folder, and write a function inside it that contains the response for the change. In this example, we will take App.js as the parent component.
const handleChange = () => {alert("Hello! Thankyou for joining Educative");};
Step 2: Import the subcomponent into the parent component. In this example, the sub-component is Navbar.js.
import Navbar from "./Navbar";
Step 3: Override the Navbar component in the app component and pass the event handler as a parameter. In this example, we name our parameter onClick which calls the handleChange function when triggered.
<Navbar onClick = {handleChange} />
Step 4: Get the event handler passed by the parent component as a parameter in the subcomponent. Ensure the same name is used for the parameter being sent in the parent component and received in the subcomponent.
//we get the passed eventhandler as a parameterconst Navbar = ({onClick}) => {}
Step 5: Set the event handler on any element of the subcomponent. In this example, we have set it on a button. Whenever the "Get Message" is clicked, it will invoke the handleChange function in the parent component. To invoke the function, we call the onClick function that is passed as a parameter.
<button className='btn' onClick = {onClick}>Get Message</button>
Step 6: Run the application to test your event handler. In this example, when we press the "Get Message" button, an alert message: "Congratulations! You have successfully learned event handling" is shown.
Example
.nav{
background-color:white;
align-items: center;
text-align: center;
padding: 10px;
display: flex;
flex-direction: column;
}
.btn{
background-color: rgb(30, 68, 90);
border: solid rgb(30, 68, 90);
color: aliceblue;
border-radius: 10px;
margin-top: 10px;
margin-bottom: 25px;
margin-left: 30px;
padding: 0.3rem 0.5rem;
}
h1{
color: rgb(30, 68, 90);
font-size:xx-large;
font-weight: bolder;
align-self: center;
}
img{
margin-left: 30px;
width: 270px;
height: 170px;
}Note: Click here to learn how to learn how event handlers help in managing state in React components.
Summary
An event handler can be set between two or more components by passing the response function as a parameter to the component where the event handler is triggered.
Common Query
Can we set an event handler in a subcomponent’s subcomponent that triggers a function in the parent component?
Free Resources