Published lesson · 30 minutes

Share state across components

Objective: Place state at the nearest common parent and pass values and event handlers through props.

Understand the idea

Share state across components works best when the learner can explain the reason behind each step, not just copy a result. When two components need the same changing value, their nearest shared owner can hold it and pass the value down with explicit callbacks.

A directory header shows the selected topic while a list filters resources using the same selection. Treat the names and details as invented practice information; the example is for learning a method and does not describe a live service.

A dependable sequence is: Move the topic state to the page component, pass it to the filter and list, and pass a change handler back to the filter. Write down the important decision before you begin so another person can follow the reasoning.

Keep each component focused and avoid copying state into two places. Check that changing the filter updates both the label and results. Compare the result with the objective, then change one thing at a time if the first attempt does not work.

Draw the component tree and mark which component owns the selected topic. Explain one assumption that would need checking before anyone used a similar result outside the classroom.

Keep a short record of the choices you made and the evidence you used to check them. A useful practice result is understandable by another learner, stays within the stated scope and makes its limitations visible before anyone relies on it.

Worked examples

Share state across components: practice example

Explore how share state across components supports the lesson objective with a small synthetic example.

App.tsx

import { useState } from "react";
function Filter({ value, onChange }: { value: string; onChange: (value: string) => void }) { return <label>Topic<input value={value} onChange={(event) => onChange(event.target.value)} /></label>; }
export default function Page() { const [topic, setTopic] = useState(""); return <><Filter value={topic} onChange={setTopic} /><p>Selected topic: {topic || "All"}</p></>; }

Practice tasks

  1. Explore share state across components

    Use the worked example for “Share state across components”. Change one small detail to suit a different synthetic community situation, then explain what you expected and how you checked whether the change still met the lesson objective.

  2. Build a React practice example

    Create a small practice result that demonstrates this objective: Place state at the nearest common parent and pass values and event handlers through props. Use only synthetic information, keep the first version focused, and write down one limitation that a later version should address.

  3. Review and explain the result

    Review your “Share state across components” result as if another learner will use it without your explanation. Identify one strength, one exact point that may be unclear, and a revision that would make the result easier to understand or use.

Share state across components becomes easier when you move the topic state to the page component, check the result and explain the choice to another learner.

Course overview