Categories
javascript reactjs

React.js – What is Props ?

Hey guys 👋🏻,
In this post, let us cover what actually are props in React.js

For this post we will first understand Props
✔ What is Props ?
✔ Understanding Props
✔ Accessing Props in Functional and Class based Components
✔ Examples of Props

Image description

Introduction to Props

Props are used to make components configurabledynamic and flexible. Every HTML element as we know has some attributes like input element has valueplaceholder etc. It is dynamic content that you can configure from outside.

Understanding Props

Our components which are customized HTML elements can also be passed some arguments in form of attributes known as props so as to configure just like any other HTML element is configured and it is the parent component that passes these arguments to the child component.

Every child component receives props as an argument that is passed to it by React which is an object that holds the arguments that the parent component passed to the child component and that object is known as propsprops basically means all the properties that a component is receiving from outside.

When using functional components, you can access the props using the below syntax :

props.<propName>

When using class components, you can access the props using the syntax :

this.props.<propName>

EXAMPLES

Passing a prop of brand to the Computer component :

Image description

Defining our Computer component which receives the brand prop.

Image description

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

Leave a Reply

Your email address will not be published. Required fields are marked *