How to pass onChange event handler to Child component in React

onChange is an event that is fired as soon as the value of the tag changes. To pass onChange event handler to Child component in React, we will use the method passing a function as props or the useContext() hook.

Pass onChange event handler to Child component in React

Pass a Function as props in React

To do that, we need to create a handler onChange event function in the parent component, then pass the function as a prop to the child component.

We will use the App component as a parent component. The child component will display a <input> tag.

function Child() {
    return <input id="text" name="text" />;
}

Continuing down to the App component, let’s create a state so that every time we type in <input>, this state will update the string value.

export default function App() {
    const [text, setText] = useState("");

    function handleChange(e) {
        setText(e.target.value);
    }

    return (
        <div>
            <Child handleChange={handleChange} />
            <h2>Text: {text}</h2>
        </div>
    );
}

handleChange : has the task of resetting the value when the input changes via setText(e.target.value). It is passed down to the child component via the ‘handleChange‘ property.

function Child({ handleChange }) {
    return <input id="text" name="text" onChange={handleChange} />;
}

The Child component receives this function and immediately assigns it as the onChange event handler.

Full code snippet:

import { useState } from "react";

function Child({ handleChange }) {
    return <input id="text" name="text" onChange={handleChange} />;
}

export default function App() {
    const [text, setText] = useState("");

    function handleChange(e) {
        setText(e.target.value);
    }

    return (
        <div>
            <Child handleChange={handleChange} />
            <h2>Text: {text}</h2>
        </div>
    );
}

Output:

Use useContext()

React Context will allow us to create data and pass it with a provider to all components in a React application without using “props”.

Refer to the code below:

import React, { useState, useContext } from "react";
import { Context } from "./useContext.js";

function Chid() {
    const { handleChange } = useContext(Context);
    return <input id="text" name="text" onChange={handleChange} />;
}

export default function App() {
    const [text, setText] = useState("default context value");

    function handleChange(e) {
        setText(e.target.value);
    }

    return (
        <Context.Provider value={{ handleChange }}>
            <Chid />
            <h2>Text: {text}</h2>
        </Context.Provider>
    );
}

First, create a file useContext.js to contain the definition of a Context:

import React from "react";

export const Context = React.createContext();

Then wrap the entire DOM element of the component with a Provider tag, and pass the handleChange function to other components.

<Context.Provider value={{ handleChange }}>
    <Chid />
    <h2>Text: {text}</h2>
</Context.Provider>

In the child component, assign the value received in the Context and pass it as the onChange event handler.

Output: 

Summary

In short, with several steps mentioned in the article, you can pass onChange event handler to Child component in React in an easy way.

If you have any questions, leave us a comment.

Cheryl Matth

After studying and researching, I have acquired the necessary programming skills of a web programmer. In addition to HTML, Css, Bootstrap has some popular libraries such as reactJS and NodeJS. It is enough for me when designing from front-end to back-end.