(#9) How to use Props in React | Props in React JS | React Props Types | React Props Examples

Hello friends how are you in today video we will introduce the props in react J we will see how to pass data from one component to another component you using the props in the Gs so Props are basically a way to pass data from one component like from parent component to a child component so let's we directly jump to our code and let's we practicly implement the pro in Cas and we will see how to pass the data from one component to another component okay now here I am in the uh react G application that we are using in these series and here you can see that I have three components so let's me go to the header and let's me remove all the things that we use in our previous with you okay now it is our simple application let's go to the footer and the top header there is nothing okay now let's uh I will use the top header inside our main header and I will pass data from the header component to the top header okay so it mean that our header component will act as a parent component and our top header component will act as a child component so basically we will pass data from header to top header uh using the props okay now let's me go to the header and let's me first uh use the first use the top header component top header this one okay let's me show you and here you can see the top header now from the uh main header component I will pass here two properties like title is equal to and here you have to specify the title uh the title will be n code Logics and uh let's be pass here also the date okay the date is 2023 uh 09 of um 01 of the uh of September okay now I am pass pass ing two parameters to the top header from the header component okay now inside the top header component I can receive these uh values the title the date either directly using the props or I can also declare the variable name notice me let me show you both ways I will go to uh to the top header and here just type props okay and let's me use also the variable values so the first one was the title four and I will access uh the value inside the props it is props title okay uh I have just to enclose both the D inside a d otherwise it will give an error okay so copy this one and past here if you want to enclose the HTML inside uh a single place like you can see that it is an this D is not child of any other D and this one also so you have to combine all the Dives and close inside a single div you can also give here a name of D like in this way but if you don't want to enclose in a div then you can just use the fragment like in this way okay and now let me show you the result our title was in the parent company n code logic and I am passing to the top header it is our child component and I am getting the title from the props this me you can sorry I have to save save all no you let me show you the result here it is a not code logic and let me also access the other property and it was the date contr s and here the date is also displayed it is the basic way to pass uh data from parent to child using the props now let's uh uh suppose you want to also specify uh the parameter name in the child component not like the props so you have just to type the parenthesis and inside the parenthesis just type the variable name that you are getting uh from the parent component first and the second was the date let me save uh prop is not defined okay now I have no to directly access the parameters values control S no it's working again fine so these are basically the two ways to pass data from parent to child you have just to give the variable name and the value the variable name and the value and here you have to access um if you directly want to declare the variable then it is the uh it is the way if you want to just specify the props then I have already show you just type props and then get the values by typing props dot okay so it was um basic uh introduction about uh I mean about propes inia GS so we will uh see these thing in more details uh in the coming videos uh thank you for watching the you goodbye

Channel: Noor Codelogics

Views: 30

Keywords: React component props, React Props examples, React props TypeScript, How to use props in React, react props, props in react, props in react js, props react js, react component props, react props typescript, react prop types, react pass component as prop, typescript props, prop types react, defaultprops, how to use props in react, props in function component, proptypes in react, react crash course, react js tutorial, learn react js, learning react js, udemy react, react

Id: iEvg1us6hqc

Length: 6min 19sec (379 seconds)

Published: Sat Sep 09 2023