What are Props in React and How Are They Used?
💡 Concept Name
Props (short for properties) are read-only inputs passed from parent to child React components to customize or configure them.
📘 Quick Intro
Props enable React components to communicate by passing data and event handlers. They make components reusable by allowing different data to be injected dynamically.
🧠 Analogy / Short Story
Think of React components like vending machines. Props are like the selection buttons you press to get different snacks. You don’t change the machine itself; you just tell it what you want, and it gives you that. Similarly, props configure components without altering their core logic.
🔧 Technical Explanation
- 🔄 Props are passed from parent to child components as attributes in JSX.
- 📦 They are immutable inside the child component; the child cannot modify props.
- ⚛️ Functional components receive props as function parameters; class components use
this.props. - 🛠️ Props can be used to pass data, functions (event handlers), or JSX elements.
💻 Real Code Example
// Parent component
function Greeting() {
return <Message text="Hello, World!" />;
}
// Child component
function Message(props) {
return <h1>{props.text}</h1>;
}
❓ Interview Q&A
Q1: What are props in React?
A: Props are inputs passed from parent to child components to configure or customize them.
Q2: Can props be modified inside a child component?
A: No, props are read-only and immutable inside the child.
Q3: How are props passed in functional components?
A: As function parameters.
Q4: How do class components access props?
A: Through this.props.
Q5: Can you pass functions as props?
A: Yes, this is common for event handling.
Q6: What happens if a prop is not passed?
A: The value is undefined unless default props are set.
Q7: Are props mandatory?
A: No, but components often require them for proper function.
Q8: How do props enable component reuse?
A: By passing different data to the same component.
Q9: Can JSX elements be passed as props?
A: Yes, allowing complex UI composition.
Q10: Are props synchronous or asynchronous?
A: Props updates are synchronous but React's rendering is asynchronous.
📝 MCQs
Q1. What are props in React?
- Functions
- Inputs passed from parent to child components
- Stylesheets
- Event handlers
Q2. Can props be modified inside the child?
- Yes
- No
- Sometimes
- Only for strings
Q3. How are props accessed in functional components?
- this.props
- Function parameters
- Global variables
- useState
Q4. How do class components access props?
- props
- this.props
- useProps
- getProps
Q5. Can functions be passed as props?
- No
- Yes
- Only event handlers
- Only state
Q6. What is the default value if a prop is not passed?
- null
- undefined
- Empty string
- 0
Q7. Are props mutable inside the child component?
- Yes
- No
- Only with useState
- Only with context
Q8. How do props help component reuse?
- By changing state
- By passing different data
- By cloning components
- By using Redux
Q9. Can JSX be passed as props?
- No
- Yes
- Only strings
- Only functions
Q10. Are props synchronous or asynchronous?
- Synchronous
- Asynchronous
- Neither
- Both
💡 Bonus Insight
Props are fundamental to React's unidirectional data flow, enabling predictable and manageable component hierarchies. They support modular, maintainable UI by cleanly separating configuration from logic.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!