What are Props in React?
Learn what props are in React: read-only parent-to-child inputs, one-way data flow, callbacks and children — explained simply with a clear code example.
Expected Interview Answer
Props (short for properties) are read-only inputs passed from a parent component to a child component, letting you configure and reuse a component with different data.
Props flow one way — down from parent to child — and are immutable inside the receiving component, which must never modify them. They can carry any value: strings, numbers, objects, arrays, functions (for callbacks), and even JSX via children. This unidirectional data flow makes React apps predictable and components reusable, since the same component renders differently based purely on the props it receives.
- Enable reusable, configurable components
- Enforce predictable one-way data flow
- Keep components decoupled from data sources
- Allow parent-to-child communication
- Support callbacks for child-to-parent events
AI Mentor Explanation
Props are like the instructions a captain hands each fielder before an over: where to stand, how deep, whether to attack. The fielder follows them for that delivery but cannot rewrite the captain's plan on his own. Change the field settings (props) and the same players behave completely differently, just as one component renders differently with new props.
Step-by-Step Explanation
Step 1
Pass from the parent
Add attributes to the child element in JSX, e.g. <Welcome name="Ada" />.
Step 2
Receive in the child
Accept the props object as the function argument, often destructured: function Welcome({ name }) {}.
Step 3
Read, never write
Use props inside JSX but never mutate them — they are read-only inputs owned by the parent.
Step 4
Pass functions for callbacks
Send a function prop so the child can notify the parent of events, enabling upward communication.
Step 5
Use children for nested JSX
Content placed between component tags arrives as the special props.children value.
What Interviewer Expects
- Defining props as read-only parent-to-child inputs
- Explaining one-way (unidirectional) data flow
- Knowing props are immutable in the child
- Distinguishing props from state
- Understanding children and function (callback) props
Common Mistakes
- Mutating props directly inside the child
- Confusing props with state
- Thinking data can flow upward without a callback prop
- Forgetting to destructure or mistyping prop names
- Overusing prop drilling instead of context where appropriate
Best Answer (HR Friendly)
“Props are the pieces of information a parent component passes down to a child so it can display or behave the right way. The child can read them but not change them, which keeps data flowing in one clear direction and makes components easy to reuse.”
Code Example
// Child receives props and reads them (read-only)
function Welcome({ name, onGreet }) {
return (
<div>
<h1>Hello, {name}!</h1>
<button onClick={() => onGreet(name)}>Greet</button>
</div>
)
}
// Parent passes data down and a callback up
function App() {
const handleGreet = (who) => alert(`You greeted ${who}`)
return <Welcome name="Ada" onGreet={handleGreet} />
}Follow-up Questions
- What is the difference between props and state?
- How does data flow from a child back to a parent?
- What is prop drilling and how can you avoid it?
- What is props.children used for?
- How do default props work in a functional component?
MCQ Practice
1. Props in React are best described as?
Props are read-only inputs passed down from a parent component and must not be mutated by the child.
2. How can a child component send data back to its parent?
The parent passes a callback function as a prop, and the child calls it to send data or events upward.
3. What does props.children contain?
Whatever JSX you place between a component's opening and closing tags is available as props.children.
Flash Cards
Are props mutable in the child? — No. Props are read-only; the child must never modify them.
Which way do props flow? — One way — downward, from parent to child (unidirectional data flow).
How does a child talk back to a parent? — By invoking a callback function the parent passed as a prop.
What is props.children? — The special prop holding JSX placed between a component's opening and closing tags.