React JS Props and Prop Drilling

React JS Props and Prop Drilling | Learn ReactJS

Рет қаралды 31,234

Күн бұрын

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
React JS props and prop drilling are must learn concepts for anyone interested in learning ReactJS. React components often need to share data which is passed as props. Prop drilling passes props from parent to child components.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a Learn React tutorial series playlist:
• React Tutorials
React JS Props and Prop Drilling | Learn ReactJS
(00:00) Intro
(00:05) What are props?
(01:28) Passing props to a component
(02:47) Destructuring props
(03:43) defaultProps
(04:51) Moving state to the parent component
(10:17) Passing props to the Footer component
(12:44) Prop drilling to an Item List Component
(19:18) Prop drilling to a reusable Line Item component
🔗 ES7 React JS Snippets Extension for VS Code:
marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
chrome.google.com/webstore/de...
🔗 Styled Components: styled-components.com/
📚 References:
ReactJS Official site: reactjs.org/
React Wikipedia: en.wikipedia.org/wiki/React_(...)
React Jobs: www.ziprecruiter.com/candidat...
✅ Follow Me:
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about Props and Prop Drilling in React JS helpful? If so, please share. Let me know your thoughts in the comments.
#react #props #prop-drilling

Пікірлер: 102

@DaveGrayTeachesCode 2 жыл бұрын

Working with props is foundational knowledge for learning React, and sharing data between components in React is often a necessity. The data, which is referred to as props, is passed down from parent components to child components. This is also called "prop drilling". If you are just learning Javascript, I recommend starting with my full 8 hour Javascript tutorial here: kzfaq.info/get/bejne/e8xxn5yT3OC6ip8.html

@nikoryu-lungma Жыл бұрын

Hi, Mr.Dave. I am currently starting on learning ReactJS, and i am watching your videos. There is one thing I am curious about one thing you said in this video. In this video, you said "Avoid the div when you can", that makes me not understand. Can you explain that why do we need to avoid the div, sir?

@neatunet Жыл бұрын

Dave, you're a priceless teacher. In my opinion, it's easy to understand the topic you're explaining because you talk about the tiny details as well, while many others think that beginners should understand the obvious things, which is often not the case. Thank you!

@DaveGrayTeachesCode Жыл бұрын

You're welcome!

@ogbonnajamessunday2139 24 күн бұрын

Well explained and easy to understand. Thank you very much Dave

@iamtharunraj 10 ай бұрын

Dave, I don't know how to thank you. I have been struggling with props. You just helped me get it in just a few minutes. Thank you!

@faisalejaz3893 10 ай бұрын

Dave your teaching method is awsome.

@fernandosalas4885 2 жыл бұрын

The way you teach is outstanding. Thank you so much!

@DaveGrayTeachesCode 2 жыл бұрын

You're welcome! And thank you for the kind words 🙏

@jhbndrivedexperience 8 ай бұрын

I'm doing all tutorials you have Dave, very good lesons, i started with Redux when i find your video in the redux website. even already have studed React there´s always something to learn, thanks for sharing this axcelent material.

@zakariachajia1199 Ай бұрын

this video is a milestone for me i learned alot from it still long way to go to finish this thing already

@shakirraza1423 Жыл бұрын

Bro very well done , You did a excellent job. Really you can't imagine that i could never seen any tutorial same as yours in the past one and half year.

@DaveGrayTeachesCode Жыл бұрын

Thank you so much 😀

@sheilakerber3513 2 жыл бұрын

Your explanations are amazing. Really grateful!

@DaveGrayTeachesCode 2 жыл бұрын

You're welcome, Sheila! 🙏

@mi5956 2 жыл бұрын

You are a king. clean code, made everything simple. thank you

@DaveGrayTeachesCode 2 жыл бұрын

Thank you for the kind words! 🙏💯

@jamshidtashkent1976 Жыл бұрын

Thank you, David Gray! You are a great teacher.

@DaveGrayTeachesCode Жыл бұрын

You're welcome!

@toonice555 10 ай бұрын

Sweet. Never knew about default props!

@forshetrial 7 ай бұрын

Thank God! I came across with this treasure ❤

@ebesquin Жыл бұрын

Dear Dave It is a wonderful course. A clear, simple and complete presentation of React I'm definitely getting a lot out of it. Thank you very very much 🤓🤓🤓

@DaveGrayTeachesCode Жыл бұрын

Glad it was helpful!

@Brightmdapps 2 жыл бұрын

I had not learned of defaultProps before now. Thanks Dave!

@DaveGrayTeachesCode 2 жыл бұрын

You're welcome, Michael! 🚀

@vivekanand5900 Жыл бұрын

Your explanation is great I really like the way you explain in great details.

@DaveGrayTeachesCode Жыл бұрын

Thank you very much! 🙏

@AIcompany1 Жыл бұрын

This is one of most important lessons in React, that flow was no sense till now... Thank you a lot my friend, you r epic teacher!!

@DaveGrayTeachesCode Жыл бұрын

Glad it helped!

@grace7671 2 жыл бұрын

Best explanation, that really helped, thank you

@DaveGrayTeachesCode 2 жыл бұрын

You're welcome! 🙏

@ghostpieces2362 2 жыл бұрын

Amazing instruction. Thank you

@DaveGrayTeachesCode 2 жыл бұрын

You're welcome! 🚀

@suovincent917 2 жыл бұрын

always the best and thank you for your excellent work

@DaveGrayTeachesCode 2 жыл бұрын

You're welcome and thank you for the kind words. 💯🙏

@bhuvaneshraj5405 4 ай бұрын

wherever whenever i can openly say that this is the best react course ever and this channel has the best content everrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

@roryquarrier7337 Жыл бұрын

thanks, helped me a lot

@DaveGrayTeachesCode Жыл бұрын

Glad it helped!

@RandomGuy-jv4vd 2 жыл бұрын

very beginner friendly, thank you sir :D

@DaveGrayTeachesCode 2 жыл бұрын

You're welcome! 🚀

@vencer5709 2 жыл бұрын

Thank you sir for your detailed explanation..

@DaveGrayTeachesCode 2 жыл бұрын

You're welcome! 💯

@masruralam6199 2 жыл бұрын

really well explanation Sir, Thanks a lot for your nice effort here.

@DaveGrayTeachesCode 2 жыл бұрын

You are most welcome! 🙏

@viniciusm.m.7822 Жыл бұрын

Thanks a lot, Dave! God bless! Forte abraço do Brasil!

@DaveGrayTeachesCode Жыл бұрын

You're welcome, Vinicius! 💯

@hardwired89 2 жыл бұрын

detail lesson ❤️❤️

@erickcohen1876 Жыл бұрын

Incredibly helpful! Thank you, Dave! I loved the "aria-label" tip for accessibility. Do you have a video on accessibility features for webapps / webpages?

@DaveGrayTeachesCode Жыл бұрын

You're welcome! 💯 I'd like to but I haven't yet. 🚀

@CTILET 2 жыл бұрын

I am now pass drilling. Thanks

@AR-iq5ji 2 жыл бұрын

Love your channel

@DaveGrayTeachesCode 2 жыл бұрын

Thank you! 🙏

@kaungchitko7156 2 жыл бұрын

Your accent is really nice and very easy to understand,Thank you sir

@DaveGrayTeachesCode 2 жыл бұрын

You are most welcome! 🙏

@World_of_motivation_5 2 жыл бұрын

Thank you 😊 Sir

@DaveGrayTeachesCode 2 жыл бұрын

You're welcome! 🙏

@modres2444 2 жыл бұрын

i am really like this tuturial , it,s help me

@DaveGrayTeachesCode 2 жыл бұрын

Glad to hear that! 🚀

@modres2444 2 жыл бұрын

@@DaveGrayTeachesCode 😍

@hanszoll4943 Жыл бұрын

Thank you

@DaveGrayTeachesCode Жыл бұрын

You're welcome!

@harag9 Жыл бұрын

Thanks for breaking this down. 1/2 way through I was hoping you would do that. On the

@konstantinospascal1892 2 жыл бұрын

I remember feeling like React is so messy and confusing at first, but that was because my code was unorganized and written really badly. I now find it so beautiful and quick to create things with, haha. Creating and managing components is addictive!

@DaveGrayTeachesCode 2 жыл бұрын

I agree! Much more to come in this series, too. 🚀

@salahhasan5547 2 жыл бұрын

there some think you must to remember it when you import or export the name of function must to start with uppercase letter

@toonice555 10 ай бұрын

Great video! I'd love to know why you chose to use an icon with roles and aria labels rather than wrapping the icon in a element? Wouldn't that solve all the accessibility issues and also keep the HTML semantic? Thanks again

@pranjalruhela1103 9 күн бұрын

nice qquestion . did you fnid out why?

@andrewclarke6916 2 жыл бұрын

Very well explained. Much easier too to deconstruct your props in child components rather than continually referring to the props object and its contents directly in code. I notice that if you delete the item key in the LineItem component itself the app still works ok with no errors. We pass the key (the item id) down as a prop from the ItemList component but it seems we don't need to refer to it in the LineItem child component. Was this just left in by accident?

@DaveGrayTeachesCode 2 жыл бұрын

You are correct! I actually quickly address this in the setup of the next tutorial. You can remove it from the li element. I missed that when pasting into the new component. Another great question Andrew! 🚀

@ambroseahawo 2 жыл бұрын

Wow nice content

@DaveGrayTeachesCode 2 жыл бұрын

Thank you! 🙏

@SeekerofUniverse33 Жыл бұрын

Hello Dave what is tabindex 0 means? Also you are one of the True Guru when it comes to Teaching. Appriciate your efforts.

@DaveGrayTeachesCode Жыл бұрын

Thank you, Lavy! 🙏 I often put a tabindex="0" on an element that would not usually get the focus when you tab through the page, but I want it to. Most form elements like inputs and buttons already get focus when tabbing without this. More here: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

@ioniangaming 8 ай бұрын

Hello Sir, when i move component to parent state in main page always tell me that the list is empty

@JesseTrammell Жыл бұрын

When I first started learning react this type of injection really bothered me about react. I definitely prefer using state management tool like mobx (not everyones favorite, I know, but it works well for the projects I use.)

@TravinskiyVladislav Жыл бұрын

Top

@jalaleddinebellouchi6317 Жыл бұрын

I had to do : style={(item.checked) ? {textDecoration : 'line-through'}:{textDecoration : 'inherit'}} I see you not using the ':' in your code, for me it results in an error (statement expected ":")

@nica1 Жыл бұрын

I'm not sure if I understand the hierarchy properly. Is the reusable component, LineItem a child of ItemList? Also, is ItemList is a child of the content component? Thank you for another great tutorial, Dave!

@DaveGrayTeachesCode Жыл бұрын

I'm going by memory here, but I think LineItem is a child component of ItemList. ItemList should contain 1 or more LineItems. I don't specifically remember a "content" component, but overall there is a hierarchy. A parent component like App.js can contain many child components - and those child components can have child components of their own, too.

@nica1 Жыл бұрын

@@DaveGrayTeachesCode thank you, Dave. Makes sense 😊.

@Retrohertz 2 жыл бұрын

Now I understand why they say it's useful to learn vanilla JS before learning libraries. If I'd not spent years learning JS, all this would make no sense at all. React is really JavaScript under the hood. The syntax is simply designed to make building apps with the same or similar components easier. Case in point -> the props drilling wasn't making sense to me. The syntax in App.js looked like HTML (e.g. ). It was only when I used 'typeof props' in the console, that I realised App.js was actually sending an object to 'Content.js'. The Object destructuring using the { } then made sense. Thanks Dave for helping me better understand all this.

@DaveGrayTeachesCode 2 жыл бұрын

You're welcome! I'm glad it is making sense! 💯

@surendharsmsn327 Жыл бұрын

Is it like passing arguments to the function?

@DaveGrayTeachesCode Жыл бұрын

There are similarities.

@anandprakash7337 2 жыл бұрын

Hello Dave, I have a question...I chose not to move the two handleCheck and handleDelete functions to App.js and got some cryptic error....am I correct to conclude that javascript functions can't access props' data only jsx can (items and setItems are required for javascript functions)

@DaveGrayTeachesCode 2 жыл бұрын

I think I understand your question. Props are passed into components. Functional components are functions. Within the function component, if you define a function, it should have access to the props that are passed in. It is not limited to JSX only.

@anandprakash7337 2 жыл бұрын

@@DaveGrayTeachesCode Thank You Dave, I tried it again but getting error "Uncaught TypeError: Cannot read properties of undefined (reading 'length')" ........maybe I will comeback to it later ,right now I don't even know what am I doing wrong and how to explain it......Thanks again

@DaveGrayTeachesCode 2 жыл бұрын

@@anandprakash7337 I believe if you go to the next lesson you will find your answer for the current problem. It is trying to read the link of an array, but the array doesn't exist right now.

@salmantech6992 Жыл бұрын

sir this playlist is great but make complete Project in current playlist so that students who learnt from the beginners playlist will gain more knowlege after developing entire application from scratch

@DaveGrayTeachesCode Жыл бұрын

There is a project in this playlist. Keep going! 🚀

@andrewclarke6916 2 жыл бұрын

So you can pass data down to a child component using props. So what do you do if you want to pass data in the opposite direction, from a child component to a parent component?

@ahmad-murery 2 жыл бұрын

I think you can pass the property related setState() function to the child and then call it from there

@DaveGrayTeachesCode 2 жыл бұрын

Ahmad is correct about setState. We will also be learning about other state management options like useContext. Great question! 💯

@andrewclarke6916 2 жыл бұрын

@@DaveGrayTeachesCode Just found out how to do this by passing a pointer to a function down from the parent to the child component as a prop. I can understand why you'd want to use the Context API or even Redux though as a central store of data if you've got multiple nested components. Passing data up and down between multiple components can quickly start to get messy.

@SeekerofUniverse33 2 жыл бұрын

what is the purpose of aria-label={`Delete ${itemlist.item}`} code was already working the same.

@DaveGrayTeachesCode 2 жыл бұрын

Lavesh, I recommend Googling "mdn aria-label" to learn about the importance of this attribute.

@MrMike44v Жыл бұрын

just want to mention , there is no need to write _rafce just rafce is fine

@DaveGrayTeachesCode Жыл бұрын

When I made this video, I needed to do that.. the extension was updated and I have changed a setting or two since. I do just type rafce in the file these days.