Props means Properties.
Props are used to pass data from one component to another component (Parent to Child).
Props help us share data between React components.
Why do we use Props?
- To pass data between components.
- To reuse components.
- To make components dynamic.
- To display different values using the same component.
Example of Props:
Parent Component (App.jsx)
import Student from './Student';
function App() {
return (
);
}
export default App;
Child Component (Student.jsx)
function Student(props) {
return (
Hello {props.name}
);
}
export default Student;
Output:
Hello Sathish
Hello Kumar
Hello Ragul
Here:
- Student is the child component.
- App is the parent component.
- name is the prop.
- props.name receives the value.
Props using Destructuring:
We can also write props using destructuring.
function Student({ name }) {
return (
Hello {name}
);
}
Rules of Props:
- Props are passed from parent to child.
- Props are read-only.
- Child components cannot directly change their props.
- Props can contain strings, numbers, arrays, objects and functions.
