What Are Props in React? A Beginner-Friendly Guide

#webdev #javascript #beginners #react

Introduction

In this blog, we’ll discuss what props are in React, why we use them, what problems they solve. Also we’ll see an example of using props. Sometimes, you need to pass data to a React component to make your app dynamic. You may find it difficult to understand how to pass data.. props do this thing for you. They are used to pass data from a parent component to a child component.

What are Props in React?

Props are inputs passed to a React component to customize its behavior or content.

Props are the properties. They are a way to communicate data from parent element to child. We design React components to show the required data. We use placeholders for the data in React component. When we use a component multiple times, different data is passed to the component. This data is passed from parent to child using props. This is the advantage of React that we can use a component multiple time. Props make components reusable and dynamic. Props are read-only. They are designed for one-way communication between components i.e., from parent to child.

Why Props are Important?

Props are one of the most important concepts in the journey of React. They give us flexibility that we can design a component and use it multiple times with different data. Reusability of components reduces the developers’ stress. Props help developers write cleaner code by defining the component only once. We can keep data and UI separate from each other. And then for rendering, we can pass data using props. Props allow us to use the same component with different data. Like we can pass different data to a function in JavaScript.

Passing Props to a Component

Props are passed as attributes. Any valid JS value can be passed (string, number, object, function) as a prop. You can pass props like this:

You give the attribute a name which will be used to receive the data in the child component. Like in my case, I have given the attribute the name, skillName.

Receiving Props in a Component

Props are received as an argument to the function i.e., component. When the props are passed, React creates an object of props and pass to the function. We can use the props by using dot notation of an object. Like:

const Skill = (props) => {
  return <li>{props.skillName}</li>;
};

export default Skill;

Using Object Destructuring

The props can also be used directly using object destructuring. Like:

const Skill = ({ skillName }) => {
  return <li>{skillName}</li>;
};

export default Skill;

Note: If you haven’t read about object destructuring, you can visit: Destructuring - JavaScript | MDN. Or if you want me to explain, feel free to comment below if you want me to explain it..