Gotta Have My Props
Tags: javascript, react, webdev
Published: 2021-01-13 22:14:47

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pi61idhvyaa2x8zb0cqa.jpg)
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.

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

```

Up next we have our child component.


```javascript
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.

```javascript
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:

```html
<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.

```javascript
<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”`.

```javascript
<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.

```javascript
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:

```javascript
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:

```javascript
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`

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