ReactJS Tutorial – 9 – Props
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703241705_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: ReactJS Tutorial – 9 – Props
In the video about components I mentioned that components are reusable so you can create a component that returns any GSX you want to and include it in any part of your application for example let’s say we need to reuse the grid component all you have to do is
Include the grid tag as many times as you want if i duplicate it twice save the file and take a look at the browser you can see Halawa choise displayed 3 times now this isn’t really helpful is it what would be great is if we could
Pass in the name of the person we wanted to greet that way reusing the same component we could greet three different people instead of greeting vishwas three times that is where probs comes into picture drops short for properties is the optional input that your component can accept it also allows the component to
Be dynamic let’s understand how props work in this video our intention here is to pass a name from app component to the grid component and render that name in the browser to specify props for a component we specify them as attributes to specify a name property we simply add
The name attribute to the attribute we assign the value let’s go with the name Bruce similarly let’s add the attribute on the other two components as well name is equal to Clark and name is equal to Diana ok so now we are sending some information or some property to the grid
Component but how do we retrieve these values in the grid component that is a quick two-step process the first step add a parameter to the functional component you are going to call it drops you can actually name this anything you want to but the convention is to name it
Drops and I highly recommend you don’t deviate from this the second step is to use this parameter in the function body now in the function body let me first log the props parameter in the console the function body is going to take up more than one line so we need
Curly braces and also the return statement console dot log props and then we’ll return the h1 element again the necessity of curly braces and the return keyword is an es6 arrow function concept if you are struggling to understand please read up on arrow functions and then continue alright so
If you go back to the browser and open dev tools you can see that there is an object logged in the console if I expand you can see that the object has a property called name and a value of Bruce similarly we have Clark and Diana three objects corresponding to the three
Components so props is just an object that contains the attributes and their values which have been passed from the parent component so if you want to display the name that has been passed to the greet component we need to use props dot name so back in vs code instead of
Vishwas we need to use props dot name if we save the file and take a look at the browser the output is not quite what we want it to be and that is because it is being treated as text we need to instead ask react to evaluate the JSX expression
And we do that by wrapping the expression with curly braces the curly braces is a feature of GFX which is really helpful and is used a lot in react applications if we now take a look at the browser you should be able to see hello Bruce hello Clark and hello Diana
The reusability of components makes much more sense now that we understand props each component can have an HTML template and we can pass in the data we want the component to use now let’s add another prop to make sure we get a good understanding of how it works I’m going
To add a second attribute I’m going to call this hero name for Bruce the value is going to be Batman for Clark it is going to be Superman and for Diana we are going to have Wonder Woman now in the grid component I’m going to modify the h1 tag to hello
Props dot name aka are also known as within curly braces props dot hero name now if we take a look at the browser you can see that the output is what we expect it to be sometimes it is also possible that you might not have an idea as to what
Content is being passed in but we want the component to render that unknown content we can do that by specifying the content between the opening and closing tag of the component and retrieving it using the reserved children property in the props object let’s understand better with an example on the first grid
Component instead of the self closing tag I will split it into opening and closing tags in between the tags I will specify a simple paragraph tag this is children props now in the grid component we can render the paragraph using props dot children so first I’m
Going to be adding parentheses as I will be splitting the JSX into multiple lines the first line is the h1 tag and then within curly braces I will add props dot children if I save the file and take a look at the browser you can see that we
Have an error this is because the JSX we have should contain only one wrapper element so back in vs code we are going to wrap both these elements within a div tag so this is a limitation we currently have we can return only one HTML element
So we have to enclose all our content in one the wrapper tag if we now save the file and take a look at the browser you can see that only for Batman we have the additional content being rendered this paragraph corresponds to the inner HTML of the grid component this right here so
If I were to add a button tag to the second grid component and take a look at the browser the button should be rendered for Superman so for the properties you know for sure are going to be passed you can pass them as attributes if you have no clue what
Is going to be passed as props or if you have to pass in dynamic HTML content has it in between the component tags and in the component definition simply render the content using props dot children if at all something is specified it is rendered in the browser and if nothing
Is passed drops dot children simply renders nothing next let’s see how to make use of props with a class component now irrespective of the component type the properties are mentioned as attributes during the component invocation so we have our welcome component which is a class component and I’m going to
Duplicate it twice next I’m going to add the exact same attributes on the first welcome component name Bruce and hero name Batman similarly Clark and Diana now in the Welcome component let’s use these values unlike the functional component where we specify the props parameter in a class component the properties are available
Through this dot props which is reserved in class components so in the HTML we can have welcome this dot props dot name also known as this dot props dot hero name basically you’re accessing the props with this keyword if you save the files and take a
Look at the browser now you should see the expected output welcome Bruce Clark and Diana so that is pretty much the basic idea behind props when specifying the component you can include additional attributes react is going to bundle all such attributes into an object which we by convention call as props in the
Component definition we can access any attribute we want to and render dynamic content now there is one strict rule though when it comes to props and that is props are immutable or in simpler words their value cannot be changed in our example if I try to assign a value to props dot
Name for example is equal to vishwas save and take a look at the browser you can see that the application breaks cannot assign to read-only property name of object react components have to act like pure functions with respect to their props parameter you cannot change it under any circumstance nevertheless
Props is a great feature in react and any practical react application will definitely make use of props but now you might have a question if props are immutable how do we maintain component data that might change over time let’s discuss the answer to that in the next
Video thank you guys for watching don’t really see you guys in the next one
-
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
thanks
For anyone who asks why console(log) displays all objects twice, the answer is: in the index.js file, <App /> is surrounded by <React.StrictMode>. Deleting this will resolve the log duplication.
The component is only enabled during development and does 3 main things:
Re-renders your components an extra time to find bugs caused by impure rerendering (side effects).
Re-runs your components effects an extra time to find bugs by missing Effect cleanup.
Checks your components for usage of deprecated APIs.
I'm happy with learning this tutorial React.I am understanding very well. That is comfortable learning for React
completed 9th video. thank you 🙂
let me guess you're a DC fan
What a DC fan you are😂
Thanks. Now I understand props finally 🤓
Batman, Superman and Wonder Woman, I really appreciate that!!! 😀
DC fan ❤
@CodeEvolution Sir, you have beautiful teaching method and your way of teaching is unique. I would like to watch and learn more courses from you.
Bruce, Clark, Diana – Bruce Wayne, Clark Kent, Diana (Wonder Woman). This guy is a DC fan ❤❤.
❤❤❤❤❤great work my dear
Wow wow .
I will go through all your tutorial
Keep it up please!! !!
please boss, do you have courses on html and css sir?
Boss, you are the best teacher ,i have ever come across in my life , you are too good ,God bless you sir
boss, you are the beat teacher ,i have ever come across ,God bless you sir ,I love your teaching .
Really really good explanation, i was jumping around to understand such a simple concept but you explained it in a very short and simpler way, keep up the same work now i have confidence that i will learn react.
oscar needs vishwas Man you are damn cool
have things changed since this dropped 4 years ago or is it still the same cuz this tut is awesome and want to keep going through it if that doesn't cause problems later
from where can we access the notes?
3:40
If we give a list or array as property for a table component is that true;
return(list){<table><body><tr foreach(element in list)>……….</tr></body></table>}
i dont know how to foreach yet 🙂
You just simplify pros for me😮, thanks 😊