What are props in detail with an example
What are props and why do we need to use them?
Props implies ‘properties’. Props are one type of object which stores a value that we cannot change. Props are immutable as we cannot change the value of props.
Why do we need to use it in react js?
When we have to pass any data from parent to child & child to the parent component then we need to use props in reactjs.
Let’s see how props work with example
Here is one example program created in react js using props. in which there are 2 files
App.js and brand.js
The dropdown is in the brand.js file, getting dropdown values from the app.js file using props.
The below array is in the App.js file
and this mobilebrands array passes it in the brand.js file
see return html code in app.js
imported brand.js file and passing mobileBrands from app.js to brand.js. in this app.js is the parent file and brand.js is the child fie because inside app.js we are calling the brand.js
here is the brand.js code:
you can see mobileBrands is in props and we are using it in the loop to show options in the dropdown.
getting data from app.js to brand.js is parent to child.
and you can see in brand.js onChange that we are setting selectedbrand state value.
on change the value of selectedbrand state passing the selected brand data to the parent file(app.js) using getSelctedBrand props
here is the app.js
in app.js you can see getselectedBrand is getting as props and created function for getselectedBrand and storing a selected brand name in selectedBrand .
This scenario of data passing from brand.js to app.js is a child to parent method.
Hope this will clear your doubts about props and you understood better in detail that what are props and why we are using it in react js.
Here is Github link with an example of props.
If you have any questions regarding props or any other things in Javascript, React, and Redux. Please comment below. will create an article on it in detail.
Thanks for reading my article. Hope this helps you to know props in a better way. Follow me to learn more about react and redux in a better and easy way.
Happy coding … :)
