What is lifting state up in React?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import { useState } from 'react';

function CelsiusInput({ value, onChange }) {
  return <input value={value} onChange={e => onChange(Number(e.target.value))} />;
}

function Fahrenheit({ celsius }) {
  return <p>{celsius * 9 / 5 + 32} °F</p>;
}

export default function Converter() {
  const [celsius, setCelsius] = useState(20);   // lives in the parent

  return (
    <div>
      <CelsiusInput value={celsius} onChange={setCelsius} />
      <Fahrenheit celsius={celsius} />
    </div>
  );
}