How to pass data to React components

Passing data to child components is something we often do in React. 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.

React logo

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.

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

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.

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.

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