Pass onChange event handler to Child component in React

avatar

Borislav Hadzhiev

Last updated: Apr 21, 2022

banner

Photo from Unsplash

Pass onChange event handler to Child component in React #

To pass an onChange event handler to a child component in React:

  1. Define the event handler function in the parent component.
  2. Pass it as a prop to the child component, e.g. <Child handleChange={handleChange} />.
  3. Set it to the onChange prop on the input field in the child.
App.js
import {useState} from 'react'; function Child({handleChange}) { return ( <input id="message" name="message" onChange={handleChange} /> ); } export default function App() { const [message, setMessage] = useState(''); function handleChange(event) { setMessage(event.target.value); } return ( <div> <Child handleChange={handleChange} /> <h2>Message is: {message}</h2> </div> ); }

pass onchange to child

We passed a handleChange function to a child component.

Notice that we didn't call the function when passing it as a prop. It's very important to pass a reference to the function, not the result of calling the function.

If you pass the result of calling the function, e.g. handleChange={handleChange()}, then it would get invoked immediately on page load, which is not what we want.

If you want to pass a parameter to the function that you are passing as a prop, use an inline arrow function.

App.js
import {useState} from 'react'; function Child({handleChange}) { return ( <input id="message" name="message" onChange={handleChange} /> ); } export default function App() { const [message, setMessage] = useState(''); function handleChange(event, anotherParam) { console.log(anotherParam); setMessage(event.target.value); } return ( <div> <Child handleChange={event => handleChange(event, 'another param')} /> <h2>Message is: {message}</h2> </div> ); }

We passed a parameter to the handleChange function when passing it as a prop to the Child component. However, note that we are still passing a function as a prop, and not the result of calling one.

You can also add extra functionality to the function you passed as a prop in the child component.

App.js
import {useState} from 'react'; function Child({handleChange}) { function wrapHandleChange(event) { console.log('Child triggered onChange'); // 👉️ your logic before handleChange(event); // 👉️ your logic after } return ( <input id="message" name="message" onChange={wrapHandleChange} autoComplete="off" /> ); } export default function App() { const [message, setMessage] = useState(''); function handleChange(event) { setMessage(event.target.value); } return ( <div> <Child handleChange={handleChange} /> <h2>Message is: {message}</h2> </div> ); }

We wrapped the handleChange function into another function where we can run some extra logic before calling it or after.

This is useful when you have to await the return value of a Promise, or run some logic based on the value of the input field.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.