React Props

⚛️ React Props

Props (short for properties) are a way to pass data from a parent component to a child component in React.

  • Props are read-only

  • They make components reusable

  • Functional and class components can both use props

 Props in Functional Components


 

export default App;

  • { name } is destructured from props

  • Props allow dynamic content in child components

 Props in Class Components


 

export default App;

  • Access props using this.props

  • Props are immutable in the child component

 Passing Multiple Props


 

 Props with Default Values

You can provide default props in case a prop is not passed.

Functional Component

Class Component


 

 Props with Children

props.children allows you to pass nested content inside a component.


 

  • Anything between <Card> ... </Card> becomes props.children

 Props for Functions / Event Handling

Props can also pass functions to child components.


 

🎯 Summary

Concept Functional Component Class Component
Access props { propName } or props.propName this.props.propName
Default props function Comp({ name = "Guest" }) static defaultProps = {}
Children props.children this.props.children
Functions as props Pass handleClick Pass handleClick

Key Notes:

  • Props are read-only

  • Do not modify props inside child components

  • Use state if the value needs to change

You may also like...