ReactJs Design Pattern ~Lifting State Up~

・Lifting state up is a design pattern of ReactJs. This is used to share a state between multiple components.

Before

function App() {
  return (
    <div>
      <h1>Lifting State Up Example</h1>
      <NameInput />
      <NameDisplay />
    </div>
  );
}

export default App;

function NameDisplay() {
//Can not display 'Hello, name!' with current code.
  return (
    <div>
      <p>Hello, {}!</p>
    </div>
  );
}

function NameInput() {
  const [name, setName] = useState("")
  return (
    <div>
      <label>Enter your name:</label>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

After

function App() {
/*Put the state name in the parent component to share it between multiple components*/
  const [name, setName] = useState("")

  return (
    <div>
      <h1>Lifting State Up Example</h1>
      <NameInput name={name} setName={setName}/>
      <NameDisplay name={name} />
    </div>
  );
}

export default App;

function NameDisplay({name}) {
  return (
    <div>
      <p>Hello, {name}!</p>
    </div>
  );
}

function NameInput({name, setName}) {
  return (
    <div>
      <label>Enter your name:</label>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}