DEV Community

loading...

Gotta Have My Props

crrojas88 profile image Rodrigo Rojas ・3 min read

Alt Text
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>
    );
  }
}

Enter fullscreen mode Exit fullscreen mode

Up next we have our child component.

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

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>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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>;
Enter fullscreen mode Exit fullscreen mode

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

<ChildComponent someAttribute={value} anotherAttribute={value}/>
Enter fullscreen mode Exit fullscreen mode

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

<ChildComponent text={Im the 1st child} />
Enter fullscreen mode Exit fullscreen mode

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>; 
};
Enter fullscreen mode Exit fullscreen mode

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"}
Enter fullscreen mode Exit fullscreen mode

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>; 
};
Enter fullscreen mode Exit fullscreen mode

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>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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).

Discussion

pic
Editor guide