How to pass data to React components
Tags: javascript, frontend, programming, react
Published: 2020-05-10 15:35:31

---
title: How to pass data to React components
published: true
date: 2020-05-10 14:07:46 UTC
tags: javascript,frontend,programming,react
canonical_url: 
---

Passing data to child components is something we often do in [React](https://reactjs.org/). It is part of it and helps us to organize our code better. In this post, I am covering how to use them in both functional and class components.

![](https://cdn-images-1.medium.com/max/1024/0*RfWRSTzSdbRsg7-P)<figcaption>React logo</figcaption>

**Passing props**

No matter what type of component you use, sending props is always the same. We are using components XML tags, and props as its attributes.

```javascript
<SomeComponent
  hardcodedProps=”some text”
  expressionProp={“expression “ + 1}
/>
```

**Using props in functional component**

The simplest way of using props is in the functional component. All the props are part of the first argument of that component function.

```javascript
function SomeComponent (props) {
  console.log(props.hardcodedProps); // “some text”
  console.log(props.expressionProp); // “expression 1”
  return <div>Some Component</div>
}
```

**Using props in the class component**

Using props in class components can look a bit more complicated, but it is still quite straightforward. Each instance of a class has this, and the general rule is that props are bound to it.

```javascript
class SomeComponent extends PureComponent {
  render() {
    console.log(this.props.hardcodedProps); // “some text”
    console.log(this.props.expressionProp); // “expression 1”
    return <div>Some Component</div>
  }
}
```

Now there are some special cases, and the first one is a constructor. In the constructor, this is still not created; therefore, you can’t use this. That doesn’t mean you can’t use props. A constructor is a function, and that function receives props as the first parameter. Similar to functional components.

```javascript
class SomeComponent extends PureComponent {
  constructor(props) {
    super(props);
    console.log(this.props.hardcodedProps); // “some text”
    console.log(this.props.expressionProp); // “expression 1”
  }
  render() {
    console.log(this.props.hardcodedProps); // “some text”
    console.log(this.props.expressionProp); // “expression 1”
    return <div>Some Component</div>
  }
}
```

There is another special case. A bit complex one. Functions that have its own this. Think of event functions. In React, you can pass anonymous functions as event handlers (click, for example), and this works. But if you pass a regular function, or use a class method, this becomes an event object. Way of fixing it is by using [bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) to define what this is or passing it. But it is not something common.

**Updating props**

If your props are changing, the parent component needs to do that. You shouldn’t be trying to change it inside. And if you do, that won’t trigger re-rendering of components. Components re-render when its state changes, or when its props change.

**Wrap up**

Props are a crucial part of React. Being able to share data between components helps us structure our code better. Better in the way that it can be better reused and maintained. Without them, we would end up using one huge component for the whole project. That is why it is so essential to understand how to use them.