How to Pass Data Between React Components Using Props

How to Pass Data Between React Components Using Props

Moving data between components is one of the most common things you do in React. Here is how to do it in every direction.

Parent to Child

The simplest case. The parent passes data as a prop, and the child reads it. This is the default data flow in React.

Child to Parent

Children cannot directly change parent state. Instead, the parent passes a callback function as a prop, and the child calls it with the new data. The parent updates its state, and the new data flows back down as props.

Sibling to Sibling

Siblings do not talk directly. They share data through their common parent. One sibling sends data up to the parent via a callback, and the parent passes it down to the other sibling as a prop.

Passing Complex Data

You can pass objects, arrays, and functions as props. For deeply nested trees, passing props through many levels, called prop drilling, becomes painful, and that is when Context API helps.

Keep Props Focused

Pass only the data a component needs. Passing an entire user object when a component only needs the name creates unnecessary coupling and re-renders.

Destructure for Readability

Destructure props in the function signature so it is clear what the component expects. This also documents the component's interface.

The Takeaway

Data flows down through props, and events flow up through callbacks. For sibling communication, lift state to the common parent. When prop drilling gets deep, reach for Context.