Certainly one of React’s core ideas is reusability by way of composable parts. Parts enable splitting complicated UI into separate, reusable items. Nevertheless, for parts to speak, they want a technique to cross information to one another. Enter props.
Props enable passing information from a dad or mum element to a baby element. They’re like perform parameters, however for React parts.
Let’s have a look at a easy instance:
// Mum or dad element
const Mum or dad = () => {
return (
<Baby
colour="blue"
onClick={handleClick}
/>
);
}
// Baby element
const Baby = (props) => {
return <div>{props.colour}</div>
}
The dad or mum element Mum or dad passes two props to the kid element Baby – a colour string and an onClick occasion handler.
The kid element receives these as a props object and may entry them as props.colour and props.onClick.
Defining Props in a Element
To specify the props a element expects, you may outline them within the element perform or class:
// Perform element
const MyComponent = (props) => {
// ...
}
// Class element
class MyComponent extends React.Element {
// ...
}
React will verify that parts are handed all of the props they anticipate. This helps catch bugs early.
You can too set default values for props:
const MyComponent = (props) => 'blue';
// ...
Passing Props When Rendering Parts
When rendering a element, you cross props like perform arguments:
// Mum or dad element
<MyComponent
title={title}
content material={content material}
writer={writer}
/>
Entry these within the baby element by way of props.
Props are read-only within the baby element. The kid can’t modify the props – this retains the info movement unidirectional.
PropTypes for Validation
It’s a good suggestion to validate props being handed to a element. React gives a PropTypes module to specify prop varieties:
import PropTypes from 'prop-types';
const MyComponent = (props) => {
// ...
}
MyComponent.propTypes = {
title: PropTypes.string.isRequired,
content material: PropTypes.string.isRequired,
writer: PropTypes.form({
identify: PropTypes.string.isRequired,
avatar: PropTypes.string
})
}
This validates props handed to MyComponent. If invalid props are handed, a warning will seem within the console.
When to Use Props vs State
Whereas props enable passing information right into a element, state is used to trace adjustments inside a element.
Use props for:
- Information that doesn’t change
- Initializing element state
- Passing information from dad or mum to baby parts
Use state for:
- Information that adjustments over time
- UI state primarily based on person interplay
- Re-rendering parts when information adjustments
Getting the excellence proper takes observe – misusing props and state is a standard supply of bugs in React.
Conclusion
Props enable totally different parts to work collectively by passing information between them. Outline props a element expects, then cross them when rendering:
// Mum or dad
<Baby title="Whats up" />
// Baby
const Baby = (props) => {
<h1>{props.title}</h1>
}
Props enable a unidirectional information movement between mother and father and youngsters. Mixed with state to handle altering information, they make constructing reusable parts a lot simpler in React.
