React | PROPS in React.js

Photo by Ferenc Almasi on Unsplash

You want to be a professional React developer, then you should know how to use effectively props in React apps. If you’re reading this article, then it is highly possible that you have some decent knowledge of components. If you don’t, then you should first learn how to create components. As you know React.js is all about components. Let say you have created a simple component(ButtonComponent). We can pass anything to the child component. As we’re going to write props in JSX which is JavaScript. So we can pass variables, arrays, objects, styles as an object.

We can use props in two different ways i.e pass properties(i.e pass properties to a child component, it could be of any type in JavaScript) and pass component as a props in the child component.

React prop is all about passing information from one component to another. But In React passing information is unidirectional, i.e. passing information in one direction specifically from parent to child. It is exactly same as passing arguments to a function.

In React, a component will receive the props object with properties. You can pass any type of data such as Boolean, string, number, object, array, etc.

Let us create a simple app(git).

The application we’re going to build

So let’s try to figure out, how we gonna build this app.

Phase 1 — Planning

This is one of the most important phase of building an app using React.js. In this phase, you’ve to identify the patterns.

Here we should identify how can we reuse or configure our app components. Try to identify the repetitive part, so that we can make their separate component. We should always make out code DRY(Don’t Repeat Yourself).

Planning

Phase 2 — Developing component

Except for the App component we gonna split our whole application into 4 different components as shown above. We will create 4 different functional components as shown in the above image. We are splitting so that we can reuse the same component. You can take both from top to bottom or from bottom to approach to compose these parts/components. But in this case, we will go from bottom to top.

  1. props: props are properties that are passed from parent to child component.
  2. children: These are components that are passed to the child component. Then child component renders children elements or components. e.g BuyButtonComponent is a component passed to CourseCardBody as a child.

The smallest component is CourseComplexity Component. It just shows the complexity of the course. In both course list, there are different difficulty levels. So before rendering, we must know the complexity level.

This is where props comes into picture, props are properties that are passed to child component by parent component. So that developer can reuse or configure the same component.

In this app, I’ve used bootstrap for styling.

Here the complexity level of the course is different in terms of text and background color only. Everything else is exactly the same as like font-size, placement, etc Let say there are currently two complexity level and parent will send the properties as props (i.e. courseComplexityType). So In child component Course Complexity all we have to do is consume props.

In the above code snippet, ES6 destructuring has been used. Without ES6, the above code would have looked like this:

First, we have defined the common classes in an array. You could have used any other data structure e.g string. Then we push the appropriate bootstrap class in studentTypeClass array. After then we just have to extract the classes and assign them to the span class. Besides assigning the classes we also have to take care of the course Complexity text that will get render right side of the Course Name in the course header i.e Beginner, Intermediate.

This is how we are going to do with all other components.

Our main objective to reuse the component as much we can so to reduce the complexity and we don’t repeat code.

Course Header: In this component, we’ll get 2 props i.e headerText and courseComplexityType. We’ll consume headerText and pass courseComplexityType to courseComplexity component. As we have already created courseComplexity component we can use this component. Here props are what CourseComplexity component is expecting to render data. It requires only one prop courseComplexityType.

CourseCardBody: In this component, we will get 2 props, First one is a property prop(courseDescription) and the second is a component as a props(children) i.e React element(BuyButtonComponent) passed form CardComponent. We will consume both in this component, courseDescription is for course description and children is a React element and we render it in the render method of courseCardBody.

Phase 3 — Composing/Integrating components

CardComponent: CardComponent gets 3 props headerText, courseComplexityType, courseDescription and we just have to use our CourseCardHeader and CourseCardBody and pass their respective props in them.

App root component: In App root component we have to compose the title, CardComponent. We usually get data in JSON format so we could have used forEach loop and renders the CardComponent as many times as we can. We just have to pass the required props.

Finally, our all components have been created and the last thing left is to pass this root App component to ReactDOM to render in DOM.

So use props so that components can be customizable and reusable.

If you want to view the Component view, you can install the React developer tools in browser and click on Components in Developer tool tabs.

Component hierarchy view

We can use same component several time but what make them different from the other same components are props.

React props are read-only. This makes react component predictable, maintainable and testable. You should never ever try to change props.

Hope you’ve learned something new from this article. Thanks for reading this article.

I'm JavaScript enthusiast. Don't talk just show me your code.