Props and state
Props and state are the input data for rendering the component. The component is re-rendered when the props or the state change.
Props
Props are inputs to components, and they are a mechanism to pass data from the parent component to its child component. Props are JavaScript objects, therefore they can contain multiple key-value pairs.
Props are immutable, so a component cannot change its props. Props are received from the parent component. A component can access props through the props object that is passed to the function component as a parameter. For example, let's take a look at the following component:
function Hello() {
return <h1>Hello John</h1>;
}
The component is just rendering a static message, and it is not reusable. Instead of using a hardcoded name, we can pass a name to the Hello component by using props, like this:
function Hello(props) {
return <h1>Hello {props.user}</h1>;
}
The...
