Passing Props in React

How do you pass data from one component to another in a React application? Cue, Props!

What are props?

"Props" is short for properties and can be used to pass dynamic data between components. Props at their core are plain JavaScript objects which hold attributes. React has a uni-directional data flow meaning props get passed from parent to child.

How do we pass props?

We'll be building on our previous example from "Getting started with React."

We have our App and Person components. We will be passing data from App to Person in order to give our person a name.

Our App.js file looks like this:

import React, { Component } from 'react'
import './App.css';
import Person from './Person/Person';

class App extends Component {

  render() {

    return (
      <div className="App-header">
        <h1>I'm building a React app!</h1>
        <Person />
      </div>
    );
  };
}

export default App;

Our Person.js file looks like this:

import React from 'react';

const Person = () => {
    return(
        <div>
            <p> Hi my name is... </p>
        </div>
    )
}

export default Person;

And this is what the above code currently renders in the browser:

Now let's name our person! We can do this by hardcoding the name in Person.js, sure. However, we want to make our component flexible, configurable, and dynamic.

In App.js, we can pass attributes to our Person component like so:

 <Person name="Marzbarz" />

We have created a keyword, in this case name, and assigned it a string.

If you try to run this, you'll notice that nothing has changed and that is because we need to add some things to our Person.js file in order for it to handle this new data.

In Person.js we will receive one argument in our function which is passed by default by React. This is props and while you don't have to name it 'props,' it is conventional and recommended.

const Person = (props) => {
    return(
        <div>
            <p> Hi my name is {props.name} </p>
        </div>
    )
}

As you can see, we are passing props as an argument and returning "Hi my name is {props.name}" with "name" being the keyword that we assigned to our property in App.js. This syntax is JSX. The curly braces tell the JSX parser that the syntax should be interpreted as JavaScript even though it is surrounded by HTML.

Now the browser should look like this:

Awesome! We have successfully passed props from one component to another!

Understanding the "children" prop

There is a special prop called "children" which is a reserved word. "Children" refers to any elements including plain text that are written in between the opening and closing tags of a child component.

For example, say we make this change to our App.js file:

 <Person name={'Marzbarz'}> and I love to code! </Person>

As it stands, nothing will look different in the browser. But if we now go into Person.js and add to our return:

<p> Hi my name is {props.name} 
    {props.children}
</p>

You'll now see:

Nice! We have dynamically passed data in two ways!

Of course, as our applications grow and become more complex we may need to introduce state which will affect how we pass props. In my next series entry, I will dive into understanding and using state.

Conclusion

We looked at what props are, practiced passing props, and accessing the reserved "children" prop.

I hope you found this guide helpful! As I continue on in my React series, I welcome feedback, discussion, and suggestions for concepts you'd like to see me tackle.