ReactJS Tutorial – 12 – Destructuring props and state
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703400781_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: ReactJS Tutorial – 12 – Destructuring props and state
All right guys before we move on to the next topic I want to take a few minutes to quickly go over restructuring props and stay in react restructuring is an es6 feature that makes it possible to unpack values from arrays or properties from objects into distinct variables in react restructuring props and state
Improves code readability you are also more likely going to find the D structuring syntax in most of the online material and that is the reason I want to go with this topic let’s start with functional components earlier in the series we had created a functional component called greed in ab dodgers you
Can see that we are passing in name and hero name as props and in the grid component we access them using props dot name and props dot hero name now there are two ways to diiie structure props in a functional component the first way is 2d structure it in the function
Parameter itself so instead of just props we are going to have parenthesis and within the parentheses we have the D structuring using curly braces name comma hero name we are basically extracting name and hero name from the props object in the JSX we can now simply use name and hero name instead of
Props dot name and props dot hero name let me also remove the console.log statement and if we take a look at the browser you can see that the app still works so that is the first way the structuring in the parameter the second way is 2d structure it in the function
Body so we go back to naming the parameter as props and in the body const curly-braces me comma hero name is equal to props so we extract name and hero name property from the props object after this you can use just name and hero named in the JSX
Go back to the browser and it should still work as expected so these are the two ways to diiie structure props in functional components next let’s take a look at class components I’m going to open welcome Jess which is our class component this component also accepts the same two
Props name and hero name now in class components we generally tend to destructure props or state in the render method so const name comma hero name is equal to this dot props so on the left hand side curly braces main camera hero name and on the right hand side this dot
Props again we are simply extracting the necessary props your props object could contain ten different props but you can restructure only the ones you wish to use in your component so in the JSX I can now remove this dot props if you take a look at the browser you
Should have welcome Bruce aka Batman which is from our welcome component now on similar lines you might also have a number of state properties you can restructure them in a similar way Const when curly braces state 1 comma state 2 is going to be equal to this dot
State now we don’t really have state in this component but this is the syntax you will come across so that is pretty much what I have on destructuring props and state in react I will make use of the same syntax going forward so please do make a note of this
Alright thank you guys for watching don’t feel too you guys in the next video
-
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
completed video 12. Thank you 🙂
Thank you
Great content, started watching intro to react playlists, liking it so far. 👍
🎉
Is this tutorial still vaild? cause this is the best one i have ever found even comparing it to some of the best paid one's.
Amazing way of explanation tough concepts
Class Components is an absolute mess, its messes everything up hahaha. Thanks for this Series.
How is destructuring is important? What is the difference if we just use the normal way?
Thank you very much for your instruction!
The way you explain is really amazing. Finally find someone who explains react for anyone.
Best way of teaching. Best content also. Thanks for the video.
Good series please make fresh series in 2022
lint saver. Awesome stuff
BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!This is cool, well done!
import React from "react";
// //First way
// const NewWayPropsForFunctionalComponent = (props) => {
// return (
// <h1>First Way {props.firstName} {props.lastName}</h1>
// )
// }
// //Second way
// const NewWayPropsForFunctionalComponent = ({firstName,lastName}) => {
// return (
// <h1>Second Way {firstName} {lastName}</h1>
// )
// }
// //Third way
// const NewWayPropsForFunctionalComponent = (props) => {
// const { firstName, lastName } = props
// return (
// <h1>Third Way {firstName} {lastName}</h1>
// )
// }
// //Fourth way
const NewWayPropsForFunctionalComponent = (props) => {
const firstName = props.firstName
const lastName = props.firstName
return (
<h1>Fourth Way {firstName} {lastName}</h1>
)
}
export default NewWayPropsForFunctionalComponent
Thank you.
Thank you, thank you, thank you man for the help and thank you once more.
I prefer to watch your video demos because I find it very interesting. Thank you.
Destructuring props/state:
In props: instead of props => {
…
{this.props.name}
…
}
Way 1: ({name}) => {
…
{name}
…
}
2: props => {
const {name} = props
…
{name}
…
}
In state: render() {
const {name, age} = this.props
const {state1, state2} = this.state
}
Your way of teaching and explaining the things is simply best that anyone I have seen till now.. I bought a course from Udemy but… could not understand the concept until I watched your Videos. Very well explained
I'm glad that I started learning React with this channel
Brilliant course for begganiers
Great!
Many thanks
i completed this. this is osm video
4:00 way to de-structure state
2:10 second way to de-structure props
1:22 first way to de-structure props
awesome explanation 🙏
ty
so does the order matter? Like what if heroName was first in your destructor, would the value for heroName actually be 'diana' instead?
2:44 De-structure in class components
You have explained every concept so beautifully.
💗💗💗
great, so we are passing props name instead of word prop
Execellent ❤