One of React’s core concepts is reusability through composable components. Components allow splitting complex UI into separate, reusable pieces. However, for components to communicate, they need a way to pass data to each other. Enter props.
Props allow passing data from a parent component to a child component. They are like function parameters, but for React components.
Let’s look at a simple example:
The parent component
Parent passes two props to the child component
Child - a
color string and an
onClick event handler.
The child component receives these as a
props object and can access them as
Defining Props in a Component
To specify the props a component expects, you can define them in the component function or class:
React will check that components are passed all the props they expect. This helps catch bugs early.
You can also set default values for props:
Passing Props When Rendering Components
When rendering a component, you pass props like function arguments:
Access these in the child component through
Props are read-only in the child component. The child can’t modify the props - this keeps the data flow unidirectional.
PropTypes for Validation
It’s a good idea to validate props being passed to a component. React provides a PropTypes module to specify prop types:
This validates props passed to
MyComponent. If invalid props are passed, a warning will appear in the console.
When to Use Props vs State
While props allow passing data into a component, state is used to track changes within a component.
Use props for:
- Data that doesn’t change
- Initializing component state
- Passing data from parent to child components
Use state for:
- Data that changes over time
- UI state based on user interaction
- Re-rendering components when data changes
Getting the distinction right takes practice - misusing props and state is a common source of bugs in React.
Props allow different components to work together by passing data between them. Define props a component expects, then pass them when rendering:
Props allow a unidirectional data flow between parents and children. Combined with state to manage changing data, they make building reusable components much easier in React.