Component Props

Props are read-only inputs that allow a component to receive data and configuration from its parent. They make components reusable by letting the parent control what values the child receives.

In React, props are values passed from a parent component to a child component. They can contain strings, numbers, booleans, objects, arrays, functions, or even other React elements. A component reads props through its parameter, commonly by destructuring the props object.

Props establish a one-way data flow: information normally moves from a parent down to its children. The child can use the received values to decide what to render or how to behave, but it should not directly modify the props object.

Props are useful for making components configurable and reusable. Instead of creating separate components for every variation, a parent can pass different values such as `name`, `disabled`, or `theme` to the same component.

When a child needs to cause something to happen in its parent, the parent can pass a function as a prop. The child calls that function, while the parent remains responsible for owning and changing its state.

Key points

• Props are inputs passed from a parent component to a child.
• A child should treat props as read-only.
• Props can contain values, objects, arrays, functions, and React elements.
• Props support reusable and configurable components.
• A function prop can let a child request an action from its parent.

Interview questions

What are props in React?

Props are inputs passed from a parent component to a child component. They let the parent provide data or configuration that affects how the child renders or behaves. The receiving component should treat props as read-only. Props can hold many JavaScript values, including functions and objects.

Why are props useful for reusable components?

Props let one component support different inputs without duplicating its implementation. For example, one `Button` component can receive different `label`, `disabled`, or `onClick` values. The parent chooses the configuration while the component handles the rendering logic. This separates reusable component behavior from the data supplied to it.

Can a child component change its props?

A child should not directly change its props. Props represent values owned by the parent, so changing them in the child would violate the expected one-way data flow. If the child needs a change, the parent can pass a callback function as a prop. The callback lets the child communicate an event or requested change while the parent updates its own state.

What kinds of values can be passed as props?

Props can contain ordinary JavaScript values such as strings, numbers, booleans, arrays, objects, and functions. A component can also receive React elements as props. The important distinction is not the value's type but that the receiving component treats the prop as an input. Objects and arrays should not be mutated through a prop.

How does data flow between parent and child components using props?

The parent renders the child and supplies values through JSX attributes. React makes those values available to the child as its props. This creates a predictable parent-to-child data flow. If the child needs to communicate an action upward, the parent can provide a callback prop for the child to call.