React Props: Arguments for Your Components
Think of props as arguments for your UI components, letting you pass data from a parent down to a child. You use them to customize a component's appearance or behavior, like passing a user object to a ProfileCard.
Why it exists
Components in an application need to communicate. Without a clear mechanism, you'd have a tangled mess of dependencies. Props were created to establish a clear, one-way data flow from parent components to child components, ensuring predictability and reusability.
The mental model
Think of props as the arguments you pass to a function. A React component is like a function that returns UI. Props are the inputs that customize what that UI looks like and how it behaves. Just as you can call a function sum(2, 3) or sum(5, 10), you can render a component <Avatar size={50}> or <Avatar size={100}>.
How it works
A parent component passes props as attributes on the JSX tag, like <Card title="Welcome">. These attributes are bundled into a single JavaScript object and passed as the first and only argument to the child component function. The child can then access these values by destructuring the props object, like function Card({ title }). You can pass any JavaScript value as a prop, including strings, numbers, objects, arrays, and even functions.
When to use it
Use props whenever you need to pass information from a parent to a child. This is the default, standard way to make components configurable and dynamic. Use them to pass down user data, UI configuration like color or size, or callback functions that a child can execute (e.g., an onClick handler).
When not to use it
Do not use props for data that a component owns and modifies itself; that's what state is for. A component should never modify the props it receives. If a child component needs to change a value it received as a prop, the parent should instead pass down a function that allows the child to signal that a change is needed. This maintains the one-way data flow.
One canonical example
A parent Profile component can render multiple Avatar components, each with different data. The parent passes the data via props: return ( <Avatar person={{ name: 'Lin Lanying' }} size={100} /> ). The child Avatar component receives and uses them: function Avatar({ person, size }) { return ( <img alt={person.name} width={size} height={size} /> ) }. The Avatar is reusable because it's configured entirely by the props it receives.
Interview question
Which statement accurately describes a core principle of how React components should handle props?
- a.A child component can directly modify the props it receives to update its UI.
- b.Props facilitate a one-way data flow, allowing data to be passed from parent to child components.Correct
- c.Only primitive data types like strings and numbers can be passed as props to a component.
- d.Props are primarily used for managing a component's internal state that changes over time.
Why? this is the answer
The card states that props establish a 'clear, one-way data flow from parent components to child components.' This ensures predictability and reusability. Option A is incorrect because a component should never modify the props it receives; that's what state is for.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles