React JS - Set State of Parent Component from Child

Surjith S M

Posted on October 26, 2020

Parent

function Parent() {
    const [value, setValue] = React.useState("");

    function handleChange(newValue) {
      setValue(newValue);
    }

    // We pass a callback to Child
    return <Child value={value} onChange={handleChange} />;
}

Child

function Child(props) {
    function handleChange(event) {
        // Here, we invoke the callback with the new value
        props.onChange(event.target.value);
    }

    return <input value={props.value} onChange={handleChange} />
}