What are Props in React?

In this tutorial, we will learn what are PROPS and we will also look at the differences between states and props.

---

What are Props?

Props are the arguments passed to React Components. Props allow component communication in React.

Props are analogous to function parameters, just they are used with components.

Let's see them in detail...

If you know the working of JavaScript function and arguments, you already know the working of props. Props are just a medium to pass data.

Lets first see a simple JavaScript functions:

let myFunc = (name) => {
   return `My name is ${name}`; 
}

myFunc("Rahul"); 

//My name is Rahul

Nothing fancy, an argument is passed to function myFunc and then it is returned. Let's see how we do this in React.

---

Do you remember are Cool component? Let's have a look at it again:

import React from 'react'; 

let Cool = () => {
  return (
    <p>This is reusable component.</p>
  ); 
}

export default Cool; 

And this is the index.js file (root file) which calls Cool.js:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Cool from './Cool'; 
ReactDOM.render(
  <React.StrictMode>
     <Cool />
  </React.strictMode>, 
  document.getElementById('root')
); 

Now, what are you want to reuse the Cool Component and display a different message each time? For that, we can pass the custom message like an HTML attribute and use props to receive and display the message.

Now, let's change the code in Cool.js to this:

import React from 'react'; 

let Cool = (props) => {
  return (
    <p> { props.myMessage } </p>
   ); 
} 

export default Cool; 

Now we will set the value of myMessage in the index.js file (or wherever the component is used).

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Cool from './Cool'; 
ReactDOM.render(
  <React.StrictMode>
     <Cool myMessage="This message is passed by props" />
  </React.strictMode>, 
  document.getElementById('root')
); 

You can see in line 6, we have set the value of myMessage variable which is being received by the props object in the Cool component. So we can see our custom message on the screen. We can also pass multiple variables to the props object.
Eg:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Cool from './Cool'; 
ReactDOM.render(
  <React.StrictMode>
     <Cool 
         myMessage="This message is passed by props"
         name = "Rahul"
     />
// The above can be accesed from Cool.js as props.myMessage and props.name
  </React.strictMode>, 
  document.getElementById('root')
); 

To completely appreciate the power of props lets create multiple Cool components in the root file(index.js), each with a different message.

import ReactDOM from 'react-dom'; 
import Cool from './Cool'; 
ReactDOM.render(
  <React.StrictMode>
     <Cool myMessage="This is Message 1" />
     <Cool myMessage="This is Message 2" />
     <Cool myMessage="This is Message 3" />
  </React.strictMode>, 
  document.getElementById('root')
); 

We keep the Cool.js file as it is and let's see the results:

So as you can see, the props allow us to render the same component in a slightly different way and thus making it completely reusable. Although here we have just used strings, props can be any valid JavaScript Type (objects, arrays, boolean etc).

---

Difference between States and Props

States are the data maintained inside a component. It is local and owned by the component itself. Only the component can update its state.

Props are the data passed in from the parent component. They are immutable inside the component that receives them.

The difference is all about which component owns the data. The state is owned locally and updated by the component itself. Props are owned by a parent component and are read-only.

---

Comment down questions below..

😎Thanks For Reading | Happy Reacting📘

Comments

[w3bdesign]

Unless you are planning to reassign the variable, it is generally considered best practice to use const instead of let.

So the code will become this:

import React from 'react';

const Cool = (props) => {
  return <p> {props.myMessage} </p>;
};