Why lifting state is needed in React - See It in Action

Why Lifting State Is Needed in React

📖 Scenario: Imagine you are building a simple React app where two components need to share and update the same information, like a temperature converter showing Celsius and Fahrenheit.

🎯 Goal: You will create two input components that share the same temperature value. You will lift the shared state up to a parent component so both inputs stay in sync when you type in either one.

📋 What You'll Learn

Create a parent component called TemperatureConverter with a state variable temperature initialized to an empty string.

Create two child components called CelsiusInput and FahrenheitInput that receive temperature and onTemperatureChange props.

In TemperatureConverter, write functions to convert temperatures between Celsius and Fahrenheit.

Lift the state up by storing the temperature in TemperatureConverter and passing it down to both inputs, so typing in one updates the other.

💡 Why This Matters

🌍 Real World

Many apps need to share data between components, like forms, filters, or settings panels. Lifting state helps keep data consistent and UI responsive.

💼 Career

Understanding lifting state is essential for React developers to build clean, maintainable, and bug-free user interfaces that share data properly.

1

Create the TemperatureConverter component with temperature state

Create a React functional component called TemperatureConverter. Inside it, create a state variable called temperature using useState and initialize it to an empty string "".

React

import React, { useState } from 'react';

function TemperatureConverter() {
  // Create temperature state here
  
  return (
    
      {/* Inputs will go here */}
    
  );
}

export default TemperatureConverter;

Need a hint?

Use const [temperature, setTemperature] = useState("") inside the TemperatureConverter function.

2

Add CelsiusInput and FahrenheitInput components with props

Create two functional components called CelsiusInput and FahrenheitInput. Each should accept props temperature and onTemperatureChange. Render an input element of type text with its value set to temperature and onChange calling onTemperatureChange with the new value.

React

import React, { useState } from 'react';

function CelsiusInput({ temperature, onTemperatureChange }) {
  // Render input for Celsius
  
}

function FahrenheitInput({ temperature, onTemperatureChange }) {
  // Render input for Fahrenheit
  
}

function TemperatureConverter() {
  const [temperature, setTemperature] = useState("");

  return (
    
      {/* Inputs will go here */}
    
  );
}

export default TemperatureConverter;

Need a hint?

Each input uses value={temperature} and calls onTemperatureChange with the new input value on change.

3

Add conversion functions and lift state in TemperatureConverter

Inside TemperatureConverter, add two functions: toCelsius and toFahrenheit that convert temperatures between Fahrenheit and Celsius. Add two handler functions: handleCelsiusChange and handleFahrenheitChange that update the temperature state with the converted value. Pass the correct temperature and handler props to CelsiusInput and FahrenheitInput so they stay in sync.

React

import React, { useState } from 'react';

function CelsiusInput({ temperature, onTemperatureChange }) {
  return (
    
      Enter temperature in Celsius:
       onTemperatureChange(e.target.value)}
        aria-label="Celsius temperature input"
      />
    
  );
}

function FahrenheitInput({ temperature, onTemperatureChange }) {
  return (
    
      Enter temperature in Fahrenheit:
       onTemperatureChange(e.target.value)}
        aria-label="Fahrenheit temperature input"
      />
    
  );
}

function TemperatureConverter() {
  const [temperature, setTemperature] = useState("");

  // Add conversion functions and handlers here

  return (
    
      {/* Render CelsiusInput and FahrenheitInput here */}
    
  );
}

export default TemperatureConverter;

Need a hint?

Use conversion formulas and update the shared temperature state in the handlers. Pass converted values as props to inputs.

4

Complete the app with accessible labels and responsive layout

Add aria-label attributes to both input elements for accessibility. Wrap the inputs in semantic fieldset and legend tags. Add a container div with a simple flex style to place inputs side by side on wide screens and stacked on narrow screens.

React

import React, { useState } from 'react';

// Add CSS styles here or inline styles

function CelsiusInput({ temperature, onTemperatureChange }) {
  return (
    
      Enter temperature in Celsius:
       onTemperatureChange(e.target.value)}
        aria-label="Celsius temperature input"
      />
    
  );
}

function FahrenheitInput({ temperature, onTemperatureChange }) {
  return (
    
      Enter temperature in Fahrenheit:
       onTemperatureChange(e.target.value)}
        aria-label="Fahrenheit temperature input"
      />
    
  );
}

function TemperatureConverter() {
  const [temperature, setTemperature] = useState("");

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

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

  function handleCelsiusChange(value) {
    setTemperature(value);
  }

  function handleFahrenheitChange(value) {
    const celsius = toCelsius(Number(value));
    if (!isNaN(celsius)) {
      setTemperature(celsius.toFixed(2));
    } else {
      setTemperature("");
    }
  }

  return (
    
      {/* Add container div with flex style here */}
    
  );
}

export default TemperatureConverter;

Need a hint?

Use aria-label on inputs and wrap them in fieldset and legend. Add a flex container style to the parent div.