Passing data between components allows different parts of a React application to share information and respond to user interactions. Since React uses a unidirectional data flow, data generally flows from parent components down to child components. However, React also provides patterns to send data back up or share data between sibling components.

1. Passing Data from Parent to Child Using Props

The most common way to pass data between components is from a parent component to a child component using props. Props allow a parent to send values, objects, or functions to a child component.

Example:

function Child({ message }) {
  return <p>{message}</p>;
}

function Parent() {
  return <Child message="Hello from Parent" />;
}

In this example, the Parent component passes a message to the Child component using props. The Child component receives and displays the data.

2. Passing Data from Child to Parent Using Callback Functions

Sometimes, a child component needs to send data back to its parent, such as when handling user input or button clicks. This is done by passing a function from the parent to the child as a prop.

Example:

function Child({ sendData }) {
  return (
    <button onClick={() => sendData("Data from Child")}>
      Send Data
    </button>
  );
}

function Parent() {
  function handleData(data) {
    console.log(data);
  }

  return <Child sendData={handleData} />;
}

Here, the child calls the function provided by the parent, allowing data to flow upward.

3. Passing Data Between Sibling Components (Lifting State Up)

Sibling components cannot pass data directly to each other. Instead, the shared data is moved to their closest common parent. This pattern is called lifting state up.

Example:

function Input({ onChange }) {
  return <input onChange={e => onChange(e.target.value)} />;
}

function Display({ value }) {
  return <p>{value}</p>;
}

function Parent() {
  const [text, setText] = React.useState("");

  return (
    <>
      <Input onChange={setText} />
      <Display value={text} />
    </>
  );
}

The Parent component holds the state and passes data and callbacks to both children.

4. Passing Data Using Children Prop

React also allows passing components or content using the children prop. This is useful for layout and wrapper components.

Example:

function Wrapper({ children }) {
  return <div className="box">{children}</div>;
}

function App() {
  return (
    <Wrapper>
      <h2>Inside Wrapper</h2>
    </Wrapper>
  );
}

Real-World Scenario

In a form-based application, input components pass user-entered data up to a parent component, which then passes processed data down to preview or summary components. This ensures a single source of truth and keeps the UI consistent.

Important Notes and Best Practices

Data should always have a clear owner, usually the component where state is defined. Avoid excessive prop drilling, where data is passed through many layers unnecessarily. For deeply nested data sharing, alternative patterns like context can be used.

In summary, passing data between components in React relies on props, callbacks, and shared state patterns. Mastering these approaches is essential for building interactive, maintainable, and scalable React applications.