Introduction to Props in Functional Components

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.

Nesting Components into HTML Elements

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:

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal