What are Props?

Props are a way for React components to communicate with each other. Props are essentially used to pass data from one component to the other viz-a-viz a parent and a child component. These are information you can pass through a JSX tag/syntax. You can pass any JavaScript values through props like objects, arrays or functions. Props actually stands for properties. Props make various parts of component reusable.

So, what we’re doing is that we’re building our own custom HTML elements which have attributes and likewise the props also have attributes.

Simple examples of Props

Let’s see a piece of code from a component in a React Project :

function NextPage() {
  return (
    <div className="ImgBox">
      <h1>Follow these people</h1>
      <div className="Card">
        <img src={images1} alt="woman" />
        <img src={images2} alt="woman" />
        <img src={images3} alt="woman" />
      </div>
    </div>
  );
}

export default NextPage;

In the above code block we have some very simple and familiar props like className, src and the alt attribute. We’ve passed them to our img tag and div tags respectively.

However, that’s not all! You can also pass props to your custom component as well such as the <NextPage /> component as an example shown below :

function ProfilePic() {
  var pageInfo = { name: "First Project", by: "Joydeep" };
  return (
    <div>
      <h1>This is a React Component</h1>
      <p>This is a paragraph which you need to understand.</p>
      <NextPage />
      <NextPage display={{ pageInfo }} />
    </div>
  );
}

export default ProfilePic;

Look carefully at line-2 and line-8 of the above code block. <NextPage /> is a custom component imported from elsewhere. Now, inside the function ProfilePic(), we’ve created a variable called pageInfo. Now this variable has been passed to our custom component in line-8 named ‘display’ as an object inside double curly braces for an example.

How to pass props to a child component?

Let’s say we have a child component called <ExpenseDate />. Here’s how you pass props inside that :

function GoToElement() {
  return (
    <div>
      <h1>Hello my friends!</h1>
      <ExpenseDate customerInfo={{ name: "Mike", age: 35 }} id={4657} />
    </div>
  );
}

export default GoToElement;

Here, we’ve passed props like customerInfo and id.

Note : To pass key-value info to props which are objects we use {{}} i.e., double curly braces.

How to read and interpret props?

There are many ways in which to read props. Let’s look at some of them.

Example 1

You can use the JSX spread syntax like so :

export default function MadRush(props) {
   return (
      <div className= 'card'>
        <h1>Season 1</h1>
        <LoadGame {...props}/>
      </div>
     );
}

// props read inside <LoadGame/> component

Example 2

We can also write a function and, just like in JavaScript call them as parameters to read props. So, below we have a function called MadRush and we’ve names of two props cars and engines which we list inside and add the logic including the two props to run the code…

function MadRush({cars, engines}) {
// your code here
}

Note : Since it’s React we write the props inside ({ and }) which basically is the syntax.

How to set default values for props?

That’s very simple to do. Let’s take the above example again and set default value like so :

function MadRush({cars = 23, engines}) {
// your code here
}

// default value of cars set to 23

Now what will happen is if you don’t provide a default value to your prop inside your code, the default value will be taken by the engine as 23 in the above example.

Are props immutable?

Yes, by default props are essentially immutable, which means they are like constants and cannot be changed.

However, if you need to change a prop there are two ways to do so. One, you can get back to the parent component and pass a different prop and when you run it the JS engine will refresh it with the new code. Secondly, you can learn to use the setState() property in React to change or update props at you will.