Props in React

If you are learning React, then you must have heard about Props in React. Today, in this blog, I'll make you understand that what actually Props in React and why do we use it in React. Let's dive in deep :

What are Props ?

Before learning Props, let's see a basic example of a Function in JavaScript.

function firstName(fname,age)
{
  console.log( `My name is ${fname} and my age is ${age}`)
}

firstName("Ravi",26)

// My name is Ravi and my age is 26

This is just a simple example of Function.Here we pass Parameters and Arguments in our function. I hope you understand about Parameters and Arguments.

As you can see that at the time of calling function, firstName(), we provided two arguments here which is Ravi and 26. These 2 arguments later store in Parameters,fname and age and we can use it inside our function.

So if we talk about React, these arguments are Props. Now let's understand Props with example :

Create a file Message.jsx inside src folder

import React from 'react';

function Message(props){

  return(
    <h1>My name is {props.name}</h1>
  )
}

export default Message;

First, we have imported React as we are going to use its modules and want to execute JSX.
In the next line, we created a Message Component and just returning a h1 tag.

Have you noticed that we are accepting parameters in Message(props). It means some component is sending data here so here in Message.jsx, we are just receiving in (props).

The name Props is not compulsory. You can choose any name as per your need. Also, keep in mind one thing that here Props is behave like an Object.

Now, let's move to index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

import Message from './Message.jsx'

ReactDOM.createRoot( document.querySelector('#root'))
.render(<Message name="Ravi" />)

Here we are importing react, reactDom and Message.
In the last line, we have used our Component Message and inside this component, we have provided some data similar to HTML attributes.
Here name is attributes and Ravi is value. We are going to use this data in our Message.jsx. For simplicity, we have passed only one attribute as of now.

Now let's see once again our Message.jsx.

import React from 'react';

function Message(props){

  return(
    <h1>My name is {props.name}</h1>
  )
}

export default Message;

As you know that we have shared/transfer some data from our index.js, and now here we are receiving it in Parameter, name props.

Here data comes in form of Object and we know that to access the value of Object in JavaScript,we can use .(dot) operator.

So in h1 tag we are accessing the data with the help of props.name and output would be My name is Ravi.

Why we use Props in React ?

If you will notice at index.js , we used our component single time and only pass the value "Ravi". But let's suppose you need to use same component i.e. Message but instead of My name is Ravi, you would like to print My name is Alex.

Will you create a component every time for every different name? No, because we have Props.

Let's understand it with an example :

import React from 'react';
import ReactDOM from 'react-dom/client';

import Message from './Message.jsx'

ReactDOM.createRoot( document.querySelector('#root'))
.render(
  <div>
   <Message name="Ravi" />
  <Message name="Alex" />
  </div>


  )

This time we used the same component but with a different value.

Now, let's pass some more data in Message component :

import React from 'react';

function Message(props){

  return(
    <h1>My name is {props.name} and I am from {props.country}</h1>
  )
}

export default Message;

Here we are expecting 2 values in props from index.js

Below is our index.js file :


import React from 'react';
import ReactDOM from 'react-dom/client';

import Message from './Message.jsx'

ReactDOM.createRoot( document.querySelector('#root'))
.render(
  <div>
   <Message name="Ravi" country="India"/>

  </div>

  )

  // My name is Ravi and I am from India

So far we have seen that we passed attributes and its values but do you know that we can also pass Variable in place of value. Let's see it :

 <Message name="Ravi" country="India"/>

I want to pass a variable in place of "Ravi".

To do this, let's make a change in index.js :

import React from 'react';
import ReactDOM from 'react-dom/client';

import Message from './Message.jsx'

ReactDOM.createRoot( document.querySelector('#root'))
let a = "Kat"
.render(
  <div>
   <Message name={a} country="India"/>

  </div>


  )

  // My name is Kat and I am from India

Here, we just declared a variable a and store a value Kat and this variable a is being used in place of value.

Passing Objects in Props

Yes, you heard it right. Apart from Strings and Numbers, we can also pass object and access its values. Let's see how we can achieve it :

Below is our index.js file :

import React from 'react';
import ReactDOM from 'react-dom/client';
import Message from './Message.jsx'


ReactDOM.createRoot( document.querySelector('#root'))
.render(
  <div>
   <Message name={{city:'Indore'}}/>

  </div>


  )

And this is how we access the property of objects in our component Message.js

import React from 'react';

function Message(props){


  return(
    <h1>I am from {props.name.city}</h1>
  )
}

export default Message;

// I am from Indore

React Props are mutable ??

This a very famous interview question that is asked by interviewer most of the time. Can we change props value or React Props are mutable ??

The answer is React Props are immutable(Read Only). If you try to change the value of Props, you'll get an error.

Let's understand it :

Below, we have a Message.js file :

import React from 'react';

function Message(props){
props.name = "James"

// Above we want to change the name to James

  return(
    <h1>My name is {props.name} and I am from {props.country}</h1>
  )
}

export default Message;

First, we have pass a value from our index.js file

<Message name="Ravi" country="India"/>

But here in Message.js, we are trying to change value of name from Ravi to James.

function Message(props){
props.name = "James"

  return(
    <h1>My name is {props.name} and I am from {props.country}</h1>
  )
}

export default Message;

It won't show any output, hence we can say that Props are immutable. (Can't be changed)

Default Props in React :

So far we pass data from one component, receive it in another component. For example :

In index.js, we pass name as attribute and

 <Message name="Ravi"/>

in Message.js, we receive it in props :

    <h1>I am {props.name}</h1>

But what happens if we forgot to pass data from index.js or due to bugs, our attributes value is not showing like this :

 <Message/>

In this case, it'll just print I am _ and nothing else. Who I am here?

Here is the solution for Default Props. In Message.js, we can set a default props-

import React from 'react';

function Message(props){


  return(
    <h1>I am {props.name}</h1>
  )
}

export default Message;

// Setting default props below 

Message.defaultProps ={
  name:"Peter"
}

So suppose in index.js, we forgot to pass value in our component:

import React from 'react';
import ReactDOM from 'react-dom/client';
import Message from './Message.jsx'


ReactDOM.createRoot( document.querySelector('#root'))
.render(
  <div>

// No value passed here

   <Message/>

  </div>


  )

Even after no value pass, it'll still print I am Peter as we have already set default props in Message.js

Apart from this, we can use the shortcut for default props too in Message.js

 <h1>I am {props.name|| "Peter"}</h1>

So far we have learned:

Props stands for properties.
Props are arguments passed into React components.

Props are passed to components via HTML attributes.
React Props are like function arguments in JavaScript and attributes in HTML

If you really love ❤️ this article, please hit a like ✅ or drop a comment. I'll keep posting the articles related to JavaScript and Front End development.

Ravi Rathore's Blog