This content originally appeared on DEV Community and was authored by The Nerdy Dev
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
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 :
Defining our Computer component which receives the brand prop.
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.
This content originally appeared on DEV Community and was authored by The Nerdy Dev
The Nerdy Dev | Sciencx (2021-11-17T12:09:38+00:00) React.js – Props. Retrieved from https://www.scien.cx/2021/11/17/react-js-props/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.