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

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>
  );
}

CodePudding user response：

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>
  );
}

CodePudding user response：

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>
  );
}

CodePudding user response：

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>
  );
}