React Lifting State Up Complete Guide

Example 1: Counter App Shared Between Two Components

Let's say we have two sibling components that both have a count which needs to be synchronized. To achieve this, we can lift the state up to their parent component.

Step 1: Create Sibling Components

First, create two sibling components CounterA and CounterB that will display and update a count.

import React, { useState } from 'react';

function CounterA({ count, incrementCount }) {
  return (
    <div>
      <h3>Counter A</h3>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

function CounterB({ count, incrementCount }) {
  return (
    <div>
      <h3>Counter B</h3>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

Step 2: Lift the State Up to the Parent Component

Now, create a parent component SharedCounterApp that contains the shared state and passes it down to the child components.

import React, { useState } from 'react';
import CounterA from './CounterA';
import CounterB from './CounterB';

function SharedCounterApp() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Shared Counter App</h1>
      <CounterA count={count} incrementCount={incrementCount} />
      <CounterB count={count} incrementCount={incrementCount} />
    </div>
  );
}

export default SharedCounterApp;

Step 3: Render the Parent Component

Finally, render the SharedCounterApp component in your main file (e.g., App.js).

import React from 'react';
import ReactDOM from 'react-dom';
import SharedCounterApp from './SharedCounterApp';

function App() {
  return (
    <div>
      <SharedCounterApp />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Explanation

In this example, the count and the incrementCount function reside in the SharedCounterApp component. Both CounterA and CounterB receive the count and incrementCount as props, allowing them to be synchronized.

Example 2: Temperature Converter

We can create a simple temperature converter where two components share the same temperature state.

Step 1: Create Temperature Input Component

Create a component TemperatureInput that allows user input and displays the current temperature.

import React from 'react';

function TemperatureInput({ scale, temperature, onTemperatureChange }) {
  return (
    <fieldset>
      <legend>Enter temperature in {scale}:</legend>
      <input 
        value={temperature} 
        onChange={event => onTemperatureChange(event.target.value)} 
      />
    </fieldset>
  );
}

export default TemperatureInput;

Step 2: Create Calculator Component with Lifted State

Now, create a calculator component that converts between Celsius and Fahrenheit. The state is lifted up to this parent component.

import React, { useState } from 'react';
import TemperatureInput from './TemperatureInput';

function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
  return (celsius * 9 / 5) + 32;
}

function tryConvert(temperature, convert) {
  const input = parseFloat(temperature);
  if (Number.isNaN(input)) {
    return '';
  }
  const output = convert(input);
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();
}

function Calculator() {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  const handleCelciusChange = temperature => {
    setTemperature(temperature);
    setScale('c');
  };

  const handleFahrenheitChange = temperature => {
    setTemperature(temperature);
    setScale('f');
  };

  const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
  const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

  return (
    <div>
      <h1>Temperature Converter</h1>
      <TemperatureInput 
        scale="c" 
        temperature={celsius} 
        onTemperatureChange={handleCelciusChange} 
      />
      <TemperatureInput 
        scale="f" 
        temperature={fahrenheit} 
        onTemperatureChange={handleFahrenheitChange} 
      />
      <p>
        {celsius >= 100 ? (
          <strong>The water would boil.</strong>
        ) : (
          'The water would not boil.'
        )}
      </p>
    </div>
  );
}

export default Calculator;

Step 3: Render the Calculator Component

Render the Calculator component in your main file (App.js).

import React from 'react';
import ReactDOM from 'react-dom';
import Calculator from './Calculator';

function App() {
  return (
    <div>
      <Calculator />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Explanation

Here, the Calculator component holds the shared state for the temperature and its unit scale. It provides conversion methods and updates the state based on user input in either c or f scale. The TemperatureInput components receive these values through props, making sure they are always in sync.