Pass onChange event handler to Child component in React

avatar

Borislav Hadzhiev

Thu Apr 21 20222 min read

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.

Use the search field on my Home Page to filter through my more than 1,000 articles.