Props

Learning Objectives

After this lesson, you will be able to:

• Describe props

• Create a component that renders props

Component Data with Props

The React framework was built to handle data that changes over time.

So far, we have defined a Hello component inside App.js. The component's returns a div with a <h1> heading, written in JSX.

In index.js, we are importing the Appcomponent and all of the contents inside ( i.e. <Hello />). We are appending the App component to the virtual DOM, and rendering that in the root node. Cool!

This is great, but it doesn't involve any data yet, let alone data that changes over time! Let's make it more interesting.

Rather than simply display "Hello world", let's display a greeting to the user. We'll make the greeting change dynamically based on the user's name.

The question is, how do we add a name to our Hello component without hardcoding it into the component's return statement?

Find out! Try it yourself alongside this video in this codepen (note: right click both for new tab!)

todo You Do hello-world Exercise

Code along: Adding props to our component

Let's use props to make our "Hello World" app more flexible.

First, a single PROP

We want to make a greeting that's reusable for many different users, so we'll have a name prop for the name of the user.

In your src/App.js, we'll change the line that renders the Hello component to include this name prop. The new line will be:

<Hello name={"Jay"} />

We pass in data wherever we are rendering our component. In rendering the Hello component above, we pass in a prop called "name" with a value of "Jay".

Your App.js should now look like this:

import React from 'react';
import Hello from './Hello.js';

function App() {
  return (
    <div >
      <Hello name={"Jay"} />
    </div>
  );
}

export default App;

Now, every time we render our component, we will pass in data.

• When the Hello component renders, we pass the Hello component a prop called name with a value of Jay.

If you check your application now, look at the React Developer Tools nothing has changed. We're passing the name prop into the component, but the component isn't using it yet.

In our Hello component definition, we will add props as a argument to our Hello function (props){}. Next, change the <h1>Hello World!</h1> to <h1>Hello {props.name}!</h1>. The portion {props.name} deserves a closer look:

• props is an OBJECT that will collect all the props that were passed down to it from the parent component App

• props.name pulls out the name property from props and returns value Jay.

The {} syntax in JSX renders the result of any expression inside it. It works even without props. If you wrote {2+2} in your JSX, 4 would be rendered.

In App.js, your Hello class should now look like this:

function Hello(props) {
  return (
    <div>
        <h1>Hello {props.name}!</h1>
        <h3>It is time for tea.</h3>
    </div>
  );
}

In the above example, we replaced "world" with {props.name} = Jay.

Check it out! You should be able to browse to http://localhost:3000 to view this change!

What about... multiple props?

Of course, we often want components to display more complex information. To do so, we can pass multiple properties to our component! We'll use the same two steps we took to add the first prop.

First, add another prop to the component call: <Hello name={"Jay"} />, changes to <Hello name={"Jay"} age={24} />.

Update your App.js file to reflect this:

import React from 'react';
import Hello from './Hello.js';

function App() {
  return (
    <div >
      <Hello name={"Jay"} age={24} />
    </div>
  );
}

export default App;

Now, in our component definition we have access to both values. The second step is to change the Hello component class in App.js to use the age information!

function Hello(props) {
  return (
    <div>
        <h1>Hello {props.name}!</h1>
        <p>You are {props.age} years old.</p>
        <h3>It is time for tea.</h3>
    </div>
  );
}

Check it out! You should be able to browse to http://localhost:3000 to view this change!

What about... multiple props passed from an object?

If we have many props, it might get difficult to keep track when we're passing everything. A better practice is to organize values in some kind of object and then pass props to the component from that object. Let's see this strategy.

Currently, in App.js, we put Jay's name and age directly into the Hello component. Instead, we'll create an object that holds Jay's name and age, making it clearer for other developers and easier to change in the future. In your App.js file, below the import statements, add this object definition:

let person = {
  name: "Jay",
  age: 24
}

Next, we'll update what's passed into the Hello component:

function App() {
  let person = {
    name: "Jay",
    age: 24
  }

  return (
    <div >
      <Hello name={person.name} age={person.age} 
      />
    </div>
  );
}

export default App;

We don't have to change anything in Hello.js, because it's still receiving exactly the same values for exactly the same two props - name and age. We're just sending it those values in a slightly different way.

Check it out! If you browse to http://localhost:3000 nothing should have changed.

Try changing the values inside the person object. See how the page updates.

Multiple props from a more complex object

Since we're just pulling props out of an object, we can use any object we want. For example, we can nest an array inside it.

Let's say our user has some favorite animals. Update your object to include an array:

let person = {
  name: "Jay",
  age: 24,
  favorites: ["Dogs", "Tigers", "Lions"]
}

Now we can use this new information as a prop, just like normal. You could choose to pass a single element (favorites[0]) or the entire array. We'll use the entire array so that the component can display all a person's favorite animals. First, update your ReactDOM.render() call in index.js:

function App() {
  let person = {
    name: "Jay",
    age: 24,
    favorites: ["Dogs", "Tigers", "Lions"]
  }
  
  return (
    <div >
      <Hello
        name={person.personName}
        age={person.personAge}
        animals={person.favorites}
      />
    </div>
  );
}

If you check your application now, nothing has changed. Remember, a component class will just ignore any props it receives that it doesn't use. But, we want to use the favorites! Therfore, next, update your Hello component return statement

<div>
  <h1>Hello {this.props.name}!</h1>
  <p>You are {this.props.age} years old.</p>
  <p>You love: {this.props.animals}</p>
</div>

If you check the page now, you'll see React prints the entire array, as that's what was passed in. If we wanted to include all the animals clearly, we could fix the spacing. Instead, to review some syntax, let's just modify the code to render the last animal.

<div>
  <h1>Hello {this.props.name}!</h1>
  <p>You are {this.props.age} years old.</p>
  <p>You love: {this.props.animals[2]}</p>
</div>

If you want to learn more.

Read more about using props in JSX, if you'd like! This link is also in the Further Reading page at the end of the React module, under the Facebook documentation.