Call +91 9649695189
React Tutorial

Sharing State and Building a Small App

Lift shared state to a common parent and combine the track concepts in a small filterable interface.

Concept

When two components must stay synchronized, move their shared state to the closest common parent. The parent owns the value and passes data plus event handlers down through props.

Keep each piece of state in one owner and derive values that can be calculated during render. This reduces duplicated state and makes the direction of updates easier to follow.

Example

import { useState } from "react";

function SearchBox({ query, onQueryChange }) {
    return <input value={query} onChange={event => onQueryChange(event.target.value)} />;
}

export default function App() {
    const [query, setQuery] = useState("");
    return <SearchBox query={query} onQueryChange={setQuery} />;
}
Type the example yourself and change at least one value. Small experiments reveal syntax and behavior faster than passive reading.

Practice Tasks

  1. Lift a search query from a list component into App.
  2. Pass filtered results to a separate Results component.
  3. Build a small skill tracker using components, props, state and a controlled form.

Key Takeaways

  • Lift state when siblings need one shared value.
  • Keep one owner for each state value.
  • Derive filtered data instead of storing duplicate state.
Track complete
Back to React Tutorial →