Gotta Have My Props

React has a different approach to data flow & manipulation than other frameworks, and that’s why it can be difficult at the beginning to understand some concepts like props, state and so on.

I believe it’s better to keep explaining them in separated posts and in this blog post, I'm going to focus on React’s Props feature and how to use it.

What are Props?

React is a component-based library which divides the UI into little reusable pieces (or components). In some cases, those components need to communicate (send data to each other) and the way to pass data between components is by using props.

The main difference between state and props is that props are immutable. This is why the container component should define the state that can be updated and changed, while the child components should only pass data from the state using props.

These values can be anything: strings, objects (including arrays and functions), and so on. They give us the opportunity to make our components more dynamic, and a lot more reusable.

Using Props in React

1. First, define an attribute and its value.
2. Pass it down to child components using props.
3. Render the props data.

class ParentComponent extends Component {  
  render() {
    return (
      <h1>
        I'm the parent component.
        <ChildComponent />
      </h1>
    );
  }
}

Up next we have our child component.

const ChildComponent = () => {  
  return <p>I'm the 1st child!</p>; 
};

If we want to reuse the child component, we're going to have a problem.

class ParentComponent extends Component {  
  render() {
    return (
      <h1>
        I'm the parent component.
        <ChildComponent />
        <ChildComponent />
        <ChildComponent />
      </h1>
    );
  }
}

In this case, our parent component is going to render the same message 3 times.

What we'd like to do here instead is to get dynamic outputs. This way, each child component can have different data by using props.

Defining An Attribute and Its Value

We already know that we can assign attributes and values to HTML tags:

<a href="www.dev.to">Click here to visit Dev</a>;

We can do the same for React components by defining our own attributes and assigning values.

<ChildComponent someAttribute={value} anotherAttribute={value}/>

Let us declare a text attribute to the ChildComponent and then assign a string value: “I’m the 1st child”.

<ChildComponent text={“I’m the 1st child”} />

The ChildComponent now has a property and a value. Our next step is passing it down as props.

Passing Props Down to Child Components

Now let’s take the “I’m the 1st child!” string and pass it by using props.

Passing props is very simple. Like passing arguments to a function, we pass props into a React component and props bring all the necessary data.

const ChildComponent = (props) => {  
  return <p>Render the props here!</p>; 
};

Cool! So far we've created an attribute and its value, we've then passed it through props but we still can’t see it because we haven’t rendered it in the ChildComponent yet.

Before we move on to rendering props, note that when we console.log our props we get back an object:

Object {text: "I'm the first child"}

If you recall from my previous post about Javascript objects. We can access an object's elements with dot notation. Now we can render our text property with interpolation:

const ChildComponent = (props) => {  
  return <p>{props.text}</p>; 
};

Quick note: Notice how we're not using this to render our props? This is because in our example we're using a functional component rather than a class component.

Now let's add props to the other sibling components mounted on the ParentComponent

class ParentComponent extends Component {  
  render() {
    return (
      <h1>
        I'm the parent component.
        <ChildComponent text={"I'm the 1st child"} />
        <ChildComponent text={"I'm the 2nd child"} />
        <ChildComponent text={"I'm the 3rd child"} />
      </h1>
    );
  }
}

There we have it! We have successfully passed down props to the children components and rendered individual prop data.

Conclusion

• Props stand for 'properties' and is a special React keyword.
• Props are passed to components.
• Props can only be passed to components in one-way (parent to child).
• Props data is immutable (read-only).