React: Explain the concept of lifted state in React

1// ❌ Siblings can't share state
2function App() {
3  return (
4    <>
5      <TemperatureInput /> // Has its own state
6      <TemperatureDisplay /> // Can't access that state
7    </>
8  );
9}
10
11// ✅ Lift state to common parent
12function App() {
13  const [temperature, setTemperature] = useState("");
14  const [scale, setScale] = useState("celsius");
15
16  return (
17    <>
18      <TemperatureInput
19        scale={scale}
20        temperature={temperature}
21        onTemperatureChange={setTemperature}
22      />
23      <TemperatureDisplay
24        celsius={scale === "celsius" ? temperature : toCelsius(temperature)}
25      />
26    </>
27  );
28}
29
30function TemperatureInput({ scale, temperature, onTemperatureChange }) {
31  return (
32    <fieldset>
33      <legend>Enter temperature in {scale}:</legend>
34      <input
35        value={temperature}
36        onChange={(e) => onTemperatureChange(e.target.value)}
37      />
38    </fieldset>
39  );
40}
41
42function TemperatureDisplay({ celsius }) {
43  return (
44    <p>{celsius}°C = {toFahrenheit(celsius)}°F</p>
45  );
46}