A Guide to Props in React

Everything you need to know about props in React

You want to build a website for a client’s cat store. The client has a multitude of cats and requires you to create a website that contains a full directory of the cats that are on sale.

In a simple HTML, this is how you would actually implement the cats directory:

Writing almost 30 lines of code for just four cats doesn’t seem like much of an endeavor. But what if you want to expand your website to handle even more animals (say, 30 cats)? For a web developer, this becomes an extremely tedious task.

What if we use functional components to do the same job?

Now render it:

ReactDOM.render(<ContactCard/>,document.getElementById('root')

Even though this has proven to be substantially easier, there is one more caveat: All the values have been hardcoded. Not every cat should have the same phone number, email, name, and other properties.

This is where props come in handy in React.

What Are Props Anyway?

Take a simple piece of JSX code:

<ContactCard number="12345"/>

The number attribute here can be defined as a property — or prop for short.

When React sees an element representing a user-defined component(ContactCard), it passes JSX attributes and children to this component as a single object. This object is also known as props.

In short, React props are like function arguments in JavaScript and attributes in HTML. To send props into a component, we use the same syntax as with HTML attributes.

How to Use Props

Example #1: Basic usage

As an example, let’s define a custom functional component, Welcome, that prints the name of the user depending on the props that were passed to it. Here, the name of the prop will be name:

This will be the code output in the browser:

As observed, the name prop is assigned a value that is displayed accordingly. According to this code, the props.name property is assigned the value Hussain. In the end, the value of props.name is printed out in the h1 element. This is standard JSX.

If we log the value of the props object, this is what we see:

As observed, props returns an object consisting of values that are passed into the JSX element.

Now, we can use this code to welcome multiple users without hardcoding the values:

The output of the code is as follows:

Notice that we don’t need to rewrite different headers multiple times for different names. Not only does this promote modularity, but now the code seems neater and easier to read.

Example #2: Passing data between elements

We can use our nested components concept (custom component within another custom component) to implement this method.

Reusing our Welcome from the first example:

This will be the output of the code:

Rewriting Our Cats Example

Now that we’ve covered the basics, I want you to rewrite the example that was written at the start of this article.

Solution #1

Create a function, ContactCard, and use props to pass in values in the JSX elements:

Now use our created ContactCard element and specify the given props in them:

Notice how our code is now easier to read and the values don’t need to be hardcoded anymore.

However, there’s one problem associated with it: If the client chooses to add many properties about their cats down the line, then our code will become complicated once again. Let’s move on to the second method to solve this problem.

Solution #2

Wherever we’ve rendered our ContactCard elements, we can modify the code like so:

<ContactCard

contact={{name: "Mr. Whiskerson", imgUrl: "http://placekitten.com/300/200", phone: "(212) 555-1234", email: "[email protected]"}}/>

Note that this contact prop has multiple values in it.

To use this, now modify your ContactCard definition like so:

One other practical use case of this method might be if a user has two types of information and we only want to display their public information. So we can declare two props: personalInfo and privateInfo. privateInfo can have values like phoneNumber and address, whereas our personalInfo prop can contain values like twitterID and mediumAccountId that will be displayed later.

Let’s say that we have incoming data from an API. In this case, we would use the map method in JavaScript. Let’s discuss that next.

Mapping Components in React

The map() method in JavaScript creates an array by calling a specific function on each element present in the parent array.

Let’s say we have data coming in from an API called jokesData.json. This file has an array of jokes:

Now we use the map method to properly display the data in our program:

In this code, we use the map method. For every object in the JSON file, we generate a new element with the required props. In the end, we display the array with simple JSX.

This method is covered in depth in the official documentation.

If you don’t specify the id field, React throws an error. The id field is a special string attribute you need to include when creating lists of elements. We’ll discuss why that’s important in the next section.

One Thing to Remember

Props are read-only!

Whether you declare a component as a function or a class, it must never modify its own props.

Look at this function:

function sum(a, b) {
  return a + b;
}

The function above is regarded as a pure function, as it doesn’t change its inputs.

On the other hand, the function below is categorized as impure, as it attempts to change the values of the inputs passed as parameters:

function change(a) {
a = 34
}

Thus, React mentions one strict rule:

“All React components must act like pure functions with respect to their props.”

If you feel the need to change props dynamically, you would use another concept called a state. This concept will be covered in an upcoming article.

Recap

To use props:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

ReactDOM.render(<Welcome name='Hussain', document.getElementById('root'));

• Important takeaway: Props are read-only. They cannot be changed.

Further Resources

• Components and Props in React
• React Props — W3 Schools
• How to pass Props to Components in React
• ReactJS Tutorial: Props by Codevolution

Conclusion

That’s all for today. Thank you so much for making it to the end!

If you’re confused about any of these concepts, my advice to you is to play with the code and deconstruct the example programs so that you can wrap your head around the concept properly. Props are a very crucial concept within the world of React development. Don’t give up!

Next Post : Class Based Components In React Previous Article: The Basics Of Styling And Writing CSS In React