ReactJS Basics – #6 Passing Data with Props
- December 29, 2023
- Posted by: MainInstructor
- Category: Go Java JavaScript React
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703834905_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: ReactJS Basics – #6 Passing Data with Props
Hi welcome back so we have multiple components already and that’s great and that would allow you to create a flexible app with multiple components but there is something missing or there are actually a lot of things missing but I’ll come to you then one thing is right
Now we’re not really taking advantage of the fact that we’re doing all that a Java Script we’re not really able to react to user input we’re not really out putting anything dynamic right now there’s no real advantage to just creating pure HTML right well we’ll get there step by step and one important
Thing is of course passing data from components to components so let’s say from my app component I want to pass data to my home component because home component is as all components are a component I can reuse I can use multiple places I could create two home
Components after all and if I save this we see two unique components and each component might have a different configuration so it would be nice if I let’s say could pass something like a name or a age or whatever configuration to this home component and display it
There and we can do this with a concept called props for properties so what are props therefore well for the case that we have a component in another component inside of another component and we want to configure this component then we can pass props into this component so back
In the code this would work like that let’s say you home components should get a name and it’s totally up to you what you name this you can define what you want to pass in there and then you pass data by enclosing it in single collie
Braces and then let’s say a string in this case Max and I also want to pass something else let’s say the age also in overall I’m passing some user data here now the age would be a number in clothes in curly braces like that and you could
Also pass an object here so let’s say I also have my user object here and in this user object then you could have something like again let’s say ‘no name would be an a’ and then hobbies could be an array sports whatever you like something like that and then you could
Also pass this so you also pass the user object n which is user there’s one here it should be a variable of course so that is how you pass props you just to find them like HTML attributes on your component and then the data you pass has
To be enclosed in single curly braces here and with that I can go to my home component which will receive these props and now how does it receive or how can I use the props in here it’s actually really simple I can’t exited any render method or
Access it here in the render method by accessing this dub props so even though I haven’t created a property named props in this class well remember we’re extending react component and react component has this property so therefore I do have access to my props here I can
Lock this to the console and if I go back to my application you see we locked something here let’s reload it here are some objects and why is the second one empty well because I’m loading home component twice right and only the first time I’m passing data is second time
It’s empty that’s why the first time my props property provided by react has my name my age and the user object and if we have a look at this object well they can of course access all the data here well that means we cannot only access
This he exited here access it here in the console we can also output it so in a new component we could say your name is and then this is how you output data and component also with single collar braces this props name for example so now we’re getting to the place where our
Components actually make sense we can output data we can not only show static content but instead output something like for example properties and we could output data which is not passed by props here too I could all just output let’s say some text which is something like so
I could also output dead with single quality braces text and the second thing you learned how to pass props and how to use them like so oops that should not be in the return statement though should be above it so with that I’m outputting the
Name and your ages and then I would put this prop star age and we also have to user object so you could say user object name is this props props user name and then we had the hobbies right name and hobbies right it’s called user
Yeah so this and then we also have the hobbies like or let’s create and you line for that a div and then we have hobbies like so hobbies and then we want to output them in unordered list let’s say now here is the question how could I
Loop through such an array and now I know that is quite a lot we’re learning at the same time but it’s key to to understand what’s happening here looping through items in react is actually really elegant you can do it directly here could do it before too but you can do it
Here in your HTML code if you want to call it like that by accessing whoops go out of T list item for now by accessing this dot props user dot hobbies then we can use the map function since this is an array and we can basically just say
We have a callback in here what we want to do for each element in this array that’s what the map function allows me to do so I’ll use T fat arrow syntax since we use es6 code if you’re not aware what this is definitely have a look at some es6 tutorials basically
This will give me each individual hobby the name here is up to me and it can use this hobby then to output something and to something should be the list item where I then went to output the individual hobby again enclosed in single curly braces even I’m in collie
Braces here already that is how you would do that now to make this work I’ll go back to the index page remove the empty home component for now so instead would give me an error but otherwise because I’m trying to upper things the other component doesn’t have and then if
I go back you see well we got all the wonderful new output dynamically added to get our hobbies here to get to something here which is this text and we got the name we pass in the age and from the user object name so really a lot of
Stuff and all dynamically input into my render function and into this component here through props from outside of it but like text also from inside of it the key thing to take away is that this is the syntax how to output data in your component in your HTML code in the
Components able to say similar curly braces and then whatever you want output can be properties you’re getting passed into from outside but can also be variables or properties of your home class here like texts which is this variable defined up here and that’s really key to understand as of
Is this way to loop here now regarding loop there’s an interesting thing we don’t see it here but first I’m adding another hobby year let’s say reading and that will work but if we open up the console we see that we get this warning which tells me that I should provide a
Unique key for each property here and that is because I’m in a loop here with the list item and in order to make reactions work better get a better performance so to say I should give each element a key so that reacts yes is able to uniquely identify it otherwise when
Checking if it needs to update it will need to check all the elements as doesn’t have clear references to assign a key is simply right key here like a prop and then just give it a key and in order to get one I’ll add a second
Argument to my fat arrow function to the arguments that get passed into it automatically by the map method Welch I will name I which is just the curd iteration number is so starting at zero than one and so on and I will pass this
As a key and with that if I save it well you see that’s just some hot reloading bucks I got but the warning went away and with that I got clean code again I love that you saw how to output data and how to pass props two very important key
Concepts to work with react tests and to build react chess applications which are more than just displaying HTML pages but instead are actually outputting data are dynamic and are able to interact with each other though until now only from parent to child but we’ll see the other direction soon too before we’re coming
To events and state and how components can interact with let’s talk about props a little bit more there are two other things which are important which I want to highlight here the first one our prop types prop types as a concept you will find in react chairs which allows you to validate
These props it’s a good practice to set up prop types to tell react what type a certain prop type will have for the home component you can set up home or prop types by accessing your home class outside of it here outside of the class body and then access prop types like
This that’s an object you got built in to react chairs there’s simply is a challenge with the object and there you list all your props you’re expecting a skis so we have a named prop then we have an H prop and we have this user prop and then you configure them so the
Name prop here for example is and then you access react for that and then you prop types object on you react based class here or base module this shall be a string like that so with that I’m just telling react hey this property this name property will be a string and in
Order to learn more about available prompt types simply leverage the official react.js page and then HS Google for prop types to find out more about available prompt types here the H here for example will be of type number and the user here will be an object so
This will be of type object and again it’s just a good practice to do this and obsess with all be capital case by the way capital case P here at the beginning for prop types so with that if you save that you see it still works but it is a
Good practice to let react.js know about these prompt types and well use them prop types and force that your components get used correctly and you get errors huge right you set a prop to a type it’s not meant to be we do this because JavaScript doesn’t have types built-in
Right it’s not typescript it has dynamic types we can reassign a string to be a number therefore prop types allow us to make sure that we only use the types we want to use now the other thing I wanted to show you is that you can also pass
Data into a component from another component without using props because consider this example here you have your home component that’s all nice but besides these props you pass here you might have let’s say some text you want to pass and there would be a common thing if you think about a widget like
Let’s say a tabs component where you have multiple tabs then you might want to pass a specific text or HTML killed into this component from outside and not through a prop so you want to write something like this opening a closing tag and in between you want to have
Let’s say a paragraph this is a paragraph like that now it would be nice to render this paragraph in my home component and in order to do this reaction has a special property you can access it’s called on this props of course and then children now children is
A reserved word which just means whatever is passed between the opening and closing tag here so face saved is and go back we see this is a paragraph and if we inspect this we’d see it really is a paragraph so the HTML code was also passed successfully not just a
Text also DP tags and that is how you can use or pass complete code including components by the way from outside into a component yes using props indirectly but not setting it up as props here in this attribute like style of course it’s a good practice
Also set up the children props here so children and now since you can’t define the type of that what is a good idea is to access prop types and then element is required for example no it’s not that is required like this if I save this and go
Back it should work and no errors in the console so what Dad were using your children props again a reserved word we set it up correctly here just make it required and we’re passing it from outside of course that means whenever we recreate this home component we will
Have to pass something since children is required in our case here so with that we’re done having a look at props we learned a lot about props and not only props also how to generally output data in react that really was a key part of the series and with that we can continue
To events and then also state
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
15:15 propTypes for children
7:00 map
13:22 this props children within curly braces as JSX
11:00 propTypes
9:00 unique key
3:00 receive props in class component
1:30 props
Excellent tutorial and greate explanation 👍
Every time someone uses var my eyes pop out of my head
Can if pass props to home.js to main JavaScript file(app. Js)
doesn't .map return an array? how is it just rendering li items?
Hands down the best explanation for props!
Finally someone can explain it simply, right to the point. Thanks.
Can i pass variable as a prop to components???
We can code printing of list elements in an another way:
render(
class Home extends React.Component {
render(){
var text = "Something!";
console.log(this.props);
var items = [];
var hobbies = this.props.user.hobbies;
for(var i = 0;i<hobbies.length;i++){
items.push(<li>{hobbies[i]}</li>)
}
console.log(items);
return(
<div>
<p>In a new Component Called Home</p>
<p>{text}</p>
<p>Your name is {this.props.name}</p>
<p>Your Hobbies are :</p>
<ul>
{items}
</ul>
</div>
);
}
}
Very clear. Thanks
your react class based lecture are awesome even in 2020.
What syntax highlighter are you using? Mine doesn't work like yours.
thanks dad
this.props.jenniferPoopsAtParties
Hello! Just like you passed name,age and user to <Home />,how would you pass <img> and a src="URL" in the same manner?
How do i pass ID's from one component to another in react? I want to access the id of one component inside the other component, to handle click events. Pls help me out I'm new to react.
Ok i understand it a bit more now but WHYY DOES IT HAVE THIS. something something(what is this used for)?
Hi, video was great help
I am new to this just wanted to know how can we pass object in props using react router
Great Video Sir, Very Helpful … Thanks a lot
Great tutorial indeed.
For those watching this video in 2020, just add
1) import PropTypes from 'prop-types';
then
2)
Home.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
user: PropTypes.object
};
"looping through arrays in react is really elegant" – Really? That looks awful. The way its done in Vue is what I would call Elegant. This just looks awful.
I don't understand how home name = {"Max"} is working, how are you able to do that without getting a name is undefined error?
Thank you. These series are the best! Good for a very React beginner, very clear explanation of many components interacting, state and props
What is the IDE being used?
Been having a hard time trying to fully understand Props, I was actually trying to use state to do what you did with Props. This video made it very clear of what I need to do now.
Thanks, awesome video!
Greet Work man you clear my vision on how to use props this topic is bugs me for long time thanks a lot
thank you!
Great explanation.
https://darkcloud.fandom.com/wiki/Maximilian
Sir , thank you so much for spending time teaching stuffs with strangers like me. I am very grateful for that! 😇
Thanks so much! You saved me!
Thanks, you help me
Thank you, I love your tutorials. Other tutorials scared me away from learning react, yours break things down nicely.
@1:55 Is it neccessary to put { } while passing data??
7:35 – Why does not deleting second `Home` component throws an error?
Mate…You just saved my ass..big time..
<3 After smashing my head against the wall for 2 days…i finally got it. thumbs up and shared your content <3
Thanks for this! You explained it well! I watched many tutorials on how to work with props but only this one helped me!
Dynamically typed languages are fucking weird and confusing.
that .map function i was looking for something like that so much. thank you
AMAZING LESSON THANKS
thanks a lot, i feel like crying
hey, thanks. this helps me a lot. great video