Working with Props

Learning Goals

At the end of this Tutorial, you will be able to:

• Pass props down from parent to child components.

About props in React

Props (short for 'properties') are arguments passed down from a parent component to its child component.

In your parent component, you define props as an attribute with a name and value.

And in your child component you accept props as an input parameters.

Adding props as parameters to components

Follow these steps to add some props to the basic app you built with Vite in the previous Tutorial.

1. In a Command Prompt window or inside a VS Code Terminal, launch your app:
2. From the /src folder of your app, open the MainContent.jsx child component file.   Add props as an input argument to the MainContent() function.   Next, near the start of the text paragraph, add the prop {companyName} as shown below.
3. Also from the /src folder, open the Footer.js component file.   Add props as an input argument to the Footer() function.   Next, add the two props {publishMonth} and {publishYear} as shown below.

Passing arguments to props

Your next step is to pass values as arguments to the props in your components when the components are called by the top-level App.jsx component.

1. From the /src folder of your app, open the top-level App.jsx component file.
2. Add parameters that will be passed to your components as follows.

Your web page should now look as shown below.

Props and data types

Only strings can be passed to components without curly braces {}.

For numeric and boolean values, and for arrays, enclose them in one pair of curly braces {}.

For objects, use two pairs of curly braces {{}}.

As an example, update the <section> tag in your MainContent.jsx component file as shown below.

Copy Code<section>
  <img src={corporateImg} alt="Corporate" />
  <p>At {props.companyName} we leverage agile frameworks to provide a robust synopsis for high-level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>  

  <p>The <b>Text</b> is: {props.str}</p>
  <p>The <b>Number</b> is: {props.num}</p>
  <p>The <b>Truth</b> is {props.truth}</p>
  <p>The <b>Array</b> is: {props.arr[0]}</p>
  <p>The <b>username</b> in <b>users</b> object is: {props.obj.name}</p>
</section>

And update the <MainContent /> component inside your App.jsx parent component as follows.

Copy Code<MainContent 
  companyName = "ABC Corporation" 
  str = "Hello"
  num = {42}
  truth = {true}
  arr = {[99]}
  obj = {{name: 'Alice'}}         
/>

You should see the following output on the web page.

In real-world apps, the child component often renders conditionally depending on whether or not the props are passed into it. See below.

Props are Read-Only

In React, a functional component can never modify its own props. Consider this JavaScript sum function:

function sum(a, b) {
    return a + b;
}

Such functions are called pure because they do not attempt to change their inputs, and always return the same result for the same inputs.

In contrast, this function is impure because it changes its own input:

function updatePrice(amount) {
    amount = amount * 0.15;
    return amount;
}

All React components must act like pure functions with respect to their props.

The following example will still output whatever value is passed down to it from its parent component instead of “Mark”: