DEV Community

The Nerdy Dev
The Nerdy Dev

Posted on

React.js - 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 configurable, dynamic and flexible. Every HTML element as we know has some attributes like input element has value, placeholder 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 props. props 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

Discussion (0)