What Are Props in React and How Do They Work?

What Are Props in React and How Do They Work?

Props are the most fundamental way data moves through a React app. If you do not understand props, you cannot build anything beyond a single static component.

What Props Are

Props are inputs passed from a parent component to a child component. They are like function arguments: the parent passes values, and the child receives them and uses them to render.

Props Are Read-Only

A child should never modify its own props. Props flow down from the parent, and if the data needs to change, the parent updates it and passes new props down. This one-way data flow is core to React.

Passing Props

You pass props as attributes on a component, like name="Akshay". Inside the child, you receive them as an object, often destructured for readability.

Props Can Be Anything

Props can be strings, numbers, arrays, objects, functions, or even other React elements. Passing functions as props is how children communicate back up to parents.

Default Props and Fallbacks

You can provide default values for props so the component behaves sensibly when a parent does not pass them. This makes components more robust.

The Common Mistake

Beginners try to mutate props directly inside the child. This does not work the way they expect and breaks React's data flow. If you need changing data, that is state, not props.

The Takeaway

Props are read-only inputs from parent to child. They make components reusable and are the backbone of React's one-way data flow. Understand them, and component composition starts making sense.