easyPhone Screen

How do you pass data between components in React?

Q: How do you pass data between components in React?

**Core concept (TL;DR).** It depends on the relationship. **Parent → child:** props. **Child → parent:** call a **callback** prop the parent passed. **Between siblings:** lift the state to their common parent. **Between distant components:** **Context** or an external **store**. Pick the channel by component relationship parent → child : props

802 views

Understand the problem

Fundamental concept of data flow in a component-based architecture.

propsdata flowcomponent communicationcontext api

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Down via props, up via callback

import { useState } from "react";

function Child({ label, onPick }) {          // data down (label), event up (onPick)
  return <button onClick={() => onPick(label)}>{label}</button>;
}

export default function App() {
  const [picked, setPicked] = useState("none");
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <Child label="A" onPick={setPicked} />
      <Child label="B" onPick={setPicked} />
      <p>Picked: {picked}</p>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are the advantages of using React over plain JavaScript?

Explain the concept of 'unidirectional data flow' in React.