React Props Explained With Example

August 01, 2023

React Props’ job is facilitating data transfer between components in React. They help developers unlock React’s full potential and design reusable and efficient elements for building modular user interfaces. So, without further ado, let’s explore React props with a few simple examples to understand how they work.

Table of Contents

React Props Defined

Props are simply a mechanism that enables unidirectional data transfer between components in React. The passer is a parent component, while the receiver is the child. A short for properties, props are read-only, and a child component can’t modify a prop upon receiving it. This restriction helps ensure unidirectional data flow and makes React components more predictable.

How to Pass a Prop from Parent to Child?

Passing React props from a parent to a child is simple, and all you need to do is add it as an attribute when rendering the latter. Here’s how:

Parent Component Syntax

// ParentComponent.jsx

import React from 'react';

import ChildComponent from './ChildComponent';

const ParentComponent = () => {

  const name = 'John';

  const age = 25;

  return (

    <div>

      <ChildComponent name={name} age={age} />

    </div>

  );

}

export default ParentComponent;

Child Component Syntax

// ChildComponent.jsx

import React from 'react';

const ChildComponent = (props) => {

  return (

    <div>

      <h2>Name: {props.name}</h2>

      <h2>Age: {props.age}</h2>

    </div>

  );

}

export default ChildComponent;

In the example above, two props named ‘name’ and ‘age’ are passed while the ParentComponent renders the ChildComponent. The latter receives the two as an argument.

Understanding Default Props

React also lets developers specify default props. They are adopted automatically by a child component if the parent doesn’t define any particular one. Like a pre-set argument value, the default props let the developer specify a standard value once and cut the hassle.

// ChildComponent.jsx

import React from 'react';

const ChildComponent = (props) => {

  return (

    <div>

      <h2>Name: {props.name}</h2>

      <h2>Age: {props.age}</h2>

    </div>

  );

}

ChildComponent.defaultProps = {

  age: 18

};

export default ChildComponent;

In the example above, the child component will use a value of ‘18’ if the parent fails to specify any other value while passing a prop.

What Are Dynamic React Props?

Unlike popular beliefs, props aren’t solely for data transfer and they can communicate functions, objects, and even components. This feature enables React Props to use dynamic rendering and create powerful interactions between React components. Here’s an example:

// ParentComponent.jsx

import React from 'react';

import ChildComponent from './ChildComponent';

const ParentComponent = () => {

  const handleClick = () => {

    console.log('Button clicked!');

  };

  return (

    <div>

      <ChildComponent handleClick={handleClick} />

    </div>

  );

}

export default ParentComponent;

// ChildComponent.jsx

import React from 'react';

const ChildComponent = (props) => {

  return (

    <div>

      <button onClick={props.handleClick}>Click Me</button>

    </div>

  );

}

export default ChildComponent;

In the example above, the ParentComponent defines and passes a function “handleClick” as a prop to the ChildComponent. So, when anyone presses the button in the latter, the function auto executes in the former or ParentComponent.

React States vs. Props

Despite the stark difference between React States and React Props, many beginners often mix up these two. However, they are the complete opposite.

As we know now, React Props are used to transfer data from one component to another. In contrast, React States aren’t passed externally and transfer the data internally.

Moreover, React Props are immutable and cannot be modified by child components to ensure unidirectional data flow. Once a parent passes a prop, its value remains either what’s specified or the default prop value, and a child component, in no circumstances, can modify or change the value. On the other hand, a State is mutable, and any component can change its value.

Put simply, States are read-and-write, while Props are read-only. So, the latter are best for bi-directional and unidirectional information flow, while States render dynamic data.

Wrap Up

React Props are used to transfer data from one component to another. They are easy to use and immutable, making them perfect for boosting accessibility. Using props, a developer can create high-performance modular UI elements & dynamic React applications. So, the deeper you know React props, the better it is, as they can change how you build applications in React entirely.

Also Read: 10+ Ways To Optimize The Performance In React Apps