Props in React

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;

You can also try this code with Online Javascript Compiler

Run Code

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;

You can also try this code with Online Javascript Compiler

Run Code

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;

You can also try this code with Online Javascript Compiler

Run Code

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;

You can also try this code with Online Javascript Compiler

Run Code

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;

You can also try this code with Online Javascript Compiler

Run Code

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;

You can also try this code with Online Javascript Compiler

Run Code

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;

You can also try this code with Online Javascript Compiler

Run Code

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

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;

You can also try this code with Online Javascript Compiler

Run Code

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;

You can also try this code with Online Javascript Compiler

Run Code

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;

You can also try this code with Online Javascript Compiler

Run Code

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.

Check out Advantages of React JS here.

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 JavaScript, React, and various other topics here.

Recommended Readings:

• For Loop in React JS
   
• ReactJS Tutorial