How can update props in child component functional component? - reactjs

Question

I have a parent component and a child component.
The parent component sends data to the child.
The child modifies the value and the parent should see the change reflected.
But nevertheless there is something that I am not doing well because I do not understand the mechanisms of react well.
Parent component
function ParentComponent() {
var userName = "Didi";
return (
<div className="Parent">
<label>Parent - {userName}</label>
<ChildComponent userName={userName} />
</div>
);
}
Child component
function ChildComponent({ userName }) {
const handleChange = (e) => {
userName = e.target.value;
};
return (
<div className="ChildComponent">
<input type="text" defaultValue={userName} onChange={handleChange} />
<br />
<label>ChildComponent - {userName}</label>
</div>
);
}

Answer 1

React can't monitor free variables for changes. You need to store data in a state (or use some external system like Redux).
If you want to change the state from a different component, then you need to pass the function which changes it to the component.
function ParentComponent() {
const [userName, setUserName] = React.useState("Didi");
return (
<div className="Parent">
<label>Parent - {userName}</label>
<ChildComponent userName={userName} setUserName={setUserName} />
</div>
);
}
function ChildComponent({ userName, setUserName }) {
const handleChange = (e) => {
setUserName(e.target.value);
};
return (
<div className="ChildComponent">
<input type="text" defaultValue={userName} onChange={handleChange} />
<br />
<label>ChildComponent - {userName}</label>
</div>
);
}

Answer 2

Try this:
Parent component
function ParentComponent() {
const [username, setUsername] = useState("");
return (
<div className="Parent">
<label>Parent - {username}</label>
<ChildComponent
username={username}
changeUsername={value => setUsername(value)}
/>
</div>
);
}
Child component
function ChildComponent({ username, changeUsername }) {
const handleChange = e => {
changeUsername(e.target.value);
};
return (
<div className="ChildComponent">
<input type="text" value={username} onChange={handleChange} />
<br />
<label>ChildComponent - {username}</label>
</div>
);
}

Answer 3

You have to do this:
Parent component
import {useState} from 'react';
function ParentComponent() {
const [userName,setUserName]=useState("Didi");
return (
<div className="Parent">
<label>Parent - {userName}</label>
<ChildComponent userName={userName} setUserName={setUserName}/>
</div>
);
}
Child component
function ChildComponent({ userName,setUserName }) {
return (
<div className="ChildComponent">
<input type="text" defaultValue={userName} onChange={(e)=>setUserName(e.target.value)} />
<br />
<label>ChildComponent - {userName}</label>
</div>
);
}