State & Props
intermediateWhat You'll Learn
Theory
Data management is central to React. Props and state are the two ways to control data in a React component, and understanding their differences is crucial.
Props
Props (short for properties) are read-only data passed from a parent component to a child. Props flow downward — from parent to child. A component cannot modify its own props. Props make components reusable and configurable.
State
State is data that a component owns and manages internally. Unlike props, state is mutable — a component can update its own state using the useState hook. State changes trigger re-renders.
Unidirectional Data Flow
React enforces unidirectional data flow: data flows from parent to child via props. When a child needs to communicate upward, it calls a callback function passed as a prop. This pattern makes data flow predictable and debugging easier.
Why this matters
Props and state are the foundation of data management in every React application. Mastering unidirectional data flow helps you build predictable, debuggable components that scale from a simple counter to a complex dashboard.
What's next
In the next lessons, you'll dive deeper into each topic with hands-on examples and exercises.
Practical Examples
Exercises
Props to Display User Info
Create a UserCard component that accepts name, email, and age as props. Render them in a card. Then render three UserCard components with different data in the App component.
Expected Output:
Three user cards showing name, email, and age