Pack your bags! We're immersing ourselves into the world of React, exploring props
in functional components. The term props
is short for properties, and we use them to pass data between components.
Unlike variable data, props
data is read-only. This means that a child component can only read the props
sent from a parent component but can't change them. To better understand, let's consider props
as 'instructions' that a parent passes down to a child.
To illustrate, let's review this code snippet:
In the line of code {props.name}
, we are reading the name
prop within our Welcome
component.
Those who are well-versed in LEGO building can relate to the concept of nested components. Within React, components can be placed within other components. This concept of modularity allows us to reuse and combine components.
An earlier Welcome
component nested within an HTML tag bears witness to this concept:
