Props in React

Manvi Chaddha
Last Updated: May 13, 2022

Introduction

React JS is one of the most commonly used JavaScript frameworks. React eases the UI development by splitting the web page into small-sized reusable components. Components use props to support dynamic content. To master React, one should have a solid understanding of Components, State, Props, and Hooks. If you are new to React, I recommend you to read our blog on Components in React first before reading this. 

In this post, you'll read a simple but pragmatic guide on using props on React components.

Props in React

React is a component-based library that works by dividing the UI into small reusable pieces. This is analogous to how a complex program, say A scientific calculator, is divided into small functions, addition, subtraction, division, etc. Each function can be developed and tested independently.

In React, the components need to communicate or send data to each other. Props or Properties is a special keyword in React used to pass data from one component to another. They are analogous to function arguments in JavaScript.

The important point to consider is that data with props can only be passed in a unidirectional flow, i.e., from parent component to child component.

Also, props data is read-only, which means that data coming from props should not be changed by child components.

How to Pass Props to Components

A component is simply an encapsulated piece of code. For example, here’s a React functional-based component that displays a message to the user:

import React from 'react'

function ParentComponent() {
    return (
        <div>
            <h1>I am the parent component</h1>
        </div>
    )
}

export default ParentComponent;


Consider another component, ChildComponent, that greets the user. 

import React from 'react'

function ChildComponent() {
    return (
        <div>
            <h2>Hello,! How are you doing?</h2>
        </div>
    )
}

export default ChildComponent;


The ChildComponent can be rendered inside the ParentComponent as shown below:
import React from 'react'
import ChildComponent from './ChildComponent';

function ParentComponent() {
    return (
        <div>
            <h1>I am the parent component</h1>
            <ChildComponent/>
        </div>
    )
}

export default ParentComponent;


The corresponding webpage looks like this:

Note that I have created a React project using npx create-react-app. You may learn more about it here or read our comprehensive blog. Here the root component is the App component, all the components to be rendered on the page are rendered here.

For your reference, the App.js file looks like this:

import './App.css';
import ParentComponent from './ParentComponent';
function App() {
  return (
    <div className="App">
      <ParentComponent/>
    </div>
  );
}

export default App;

 

In the App.js file above we have rendered the ParentComponent. The ParentComponent in turn renders the ChildComponent as illustrated in the above examples.

Now suppose, we want a name for each user along with the message. This can be achieved by passing the name of props as We can specify props in the ChildComponent as shown below

import React from 'react'

function ChildComponent(props) {
    return (
        <div>
            <h2>Hello,{props.text}! How are you doing?</h2>
        </div>
    )
}

export default ChildComponent;


This can be considered analogous to specifying arguments in a JavaScript function.

Now this component will render differently with different props. Let us render the ChildComponent inside the ParentComponent by passing different props.

import React from 'react'
import ChildComponent from './ChildComponent';

function ParentComponent() {
    return (
        <div>
            <h1>I am the parent component</h1>
            <ChildComponent text='Ninja'/>
            <ChildComponent text='Geek'/>
            <ChildComponent text='ABC'/>
        </div>
    )
}

export default ParentComponent;

 

The corresponding web page will look like this:
 

 

Notice that we rendered the ChildComponent inside the ParentComponent thrice by passing different props, and corresponding to each prop, a different message is displayed.

So far, so good. We have successfully rendered a component inside another component by passing props.

 


But wait, Just think for a moment that we can pass many parameters to a function, is it allowed in React Components too?

 

If your answer is Yes, then you are correct.

The following section will discuss how to pass multiple props in a component.

Passing Multiple Props

Let's pass three different values, name, age, and color, to the ChildComponent as props.

import React from 'react'
import ChildComponent from './ChildComponent';

function ParentComponent() {
    return (
        <div>
            <h2>I am the parent component</h2>
            <ChildComponent name='Jack' age='6' color='orange'/>
          
        </div>
    )
}

export default ParentComponent;


The ChildComponent will accept the props and will perform some functionality. In the example we are discussing, the functionality is to display some messages. 

import React from 'react'

function ChildComponent(props) {
    console.log('👿' +props);
    return (
        <div>
            <p>Hello,{props.name}! How are you doing?</p>
            <p>{props.name} age is, {props.age}</p>
            <p>{props.name} favorite color is, {props.color}</p>
        </div>
    )
}

export default ChildComponent;

Internally the props are treated as an object; it can be verified by console.log(props) as done in the above code.
 

 

The corresponding webpage will look like this:

Notice how the ChildComponent differentiates between the various props passed to it using props.propsName as in props.age. 

React doesn’t put any restriction on what value a prop can have. But all values, except double-quoted string literals, have to be wrapped in curly braces prop={value}. The below table illustrates how we can pass different types of values on your components as props

Type of PropsHow to pass in Components?
String Literal

<MyComponent prop="My String Value">

 

Template literals with variables<MyComponent prop={`My String Value ${myVariable}`}>
Number Literals<MyComponent prop={42} />
Boolean Literals<MyComponent prop={false} />
Plain object literals<MyComponent prop={{ property: 'Value' }} />
Array Literals<MyComponent prop={['Item 1''Item 2']} />
JSX<MyComponent prop={<Message who="Joker" />} />
Variables having any kind of value<MyComponent prop={myVariable} />

 

You must pass different values as props using the table above as a reference by customizing your components.

Default Props

So far, we have seen that the parent component passes attributes to the child components; now the question is, what if the parent component does not pass any attributes to the child component or doesn't pass all the attributes the child component renders. 

Let's take a look at an example to understand what will happen in such a case. In the below example, we have not passed value to the age attribute.

import React from "react";
import ChildComponent from "./ChildComponent";

function ParentComponent() {
  return (
    <div>
      <ChildComponent name="Jack" color="orange" />
    </div>
  );
}

export default ParentComponent;


The corresponding web page will be:

As illustrated above, nothing will be displayed since the age prop is not passed; the reference to prop.age is undefined, hence the above screenshot. This is a bad user experience and is not recommended when you are working on projects. A better practice is to use default or fallback values, so when a prop is missing, it displays the fallback value in place of the missing prop.


According to React Documentation, defaultProps can be defined as a property on the component class itself, to set the default props for the class.

The default props can be set using defaultProps, as shown in the below example.
 

import React from 'react'

function ChildComponent(props) {
    return (
        <div>
            <p>Hello,{props.name}! How are you doing?</p>
            <p>{props.name} age is, {props.age}</p>
            <p>{props.name} favorite color is, {props.color}</p>
        </div>
    )
}

ChildComponent.defaultProps = {
    name: 'ABC',
    age: 0,
    color: 'pink'
};

export default ChildComponent;

 

Let's render the ChildComponent inside the ParentComponent by passing two props and no props, respectively.

import React from "react";
import ChildComponent from "./ChildComponent";

function ParentComponent() {
  return (
    <div>
      {/* Passing only two values as props */}
      <ChildComponent name="Jack" color="orange" />

      {/* Not Passing values any value as props */}
      <ChildComponent />
    </div>
  );
}

export default ParentComponent;

 

The corresponding web page looks like this.

 

Note that the Child Component uses default values for the props wherever the value for the props was not passed.

Feel free to make different components, render one inside another and try to create your own webpage.

Frequently Asked Questions

Q1) What are Props?

Ans 1) Props or Properties is a special keyword in React used to pass data from one component to another.

Q2) What is the use of Props in React?

Ans 2) Props in React is an object which stores the value of attributes of a tag and works similar to the HTML attributes. It gives a way to pass data from one component to other components. ... These attributes are available in the component. props and can be used to render dynamic data in our render method.

Q3) What are default props in React?

Ans 3) The defaultProps is a React component property that allows you to set default values for the props argument. If the prop property is passed, it will be changed. 

Key Takeaways

This blog discussed Props in React in detail. Various examples were discussed with respect to functional components.The same concept of passing props can be applied to Class-based components as well. You must give it a try. 

 Apart from this, we can find other articles on JavaScriptReact, and various other topics here.

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think