DEV Community

Cover image for What are Props in React?
Rahul
Rahul

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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; 
Enter fullscreen mode Exit fullscreen mode

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')
); 
Enter fullscreen mode Exit fullscreen mode

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; 
Enter fullscreen mode Exit fullscreen mode

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')
); 
Enter fullscreen mode Exit fullscreen mode

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')
); 
Enter fullscreen mode Exit fullscreen mode

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')
); 
Enter fullscreen mode Exit fullscreen mode

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

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📘

Top comments (1)

Collapse
 
w3bdesign profile image
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>;
}; 
Enter fullscreen mode Exit fullscreen mode