ReactJS Tutorial - 18 - Lists and Keys

Подписаться 652 тыс.

Просмотров 386 тыс.

50% 1

📘 Courses - learn.codevolution.dev/
💖 Support UPI - support.codevolution.dev/
💖 Support PayPal - www.paypal.me/Codevolution
💾 Github - github.com/gopinav
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
A “key” is a special string attribute you need to include when creating lists of elements.
Keys give the elements a stable identity.
Keys help React identify which items have changed, are added, or are removed.
This results in a much more efficient update of the user interface.

Опубликовано:

9 дек 2018

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 90

@sarfrazmohsin7542 Год назад

I have never seen a better tutorial than thiss !!! World class amazing tutorials even in 2022, no one is near you.

@ManeelxAkosAdor 4 года назад

Nice man, you not only provide good examples but go into the theory too!! Best wishes for you in your channel and life

@jeremyt1273 2 года назад

thanks for explaining why the framework is built the way it is, not just how to use it. this is real teaching.

@michaelchika4048 3 года назад

I really love how you explain things in simple terms

@sandeepa4116 3 года назад

The best explanation I ever found so far on why Key prop is required :)

@ricardoazevedo4102 5 месяцев назад

You are very concise in explaining and make the learning curve a little less steeper

@janmatyoo3506 5 лет назад

Your tutorials are really great for beginners, explaining everything clearly. Thank you!

@reedjeremy5884 2 года назад

i guess im randomly asking but does someone know of a method to get back into an Instagram account..? I somehow forgot my password. I would love any help you can give me.

@ezequielbowie5648 2 года назад

@Reed Jeremy Instablaster ;)

@reedjeremy5884 2 года назад

@Ezequiel Bowie thanks so much for your reply. I found the site through google and Im waiting for the hacking stuff atm. I see it takes a while so I will get back to you later when my account password hopefully is recovered.

@ethanappleseed7530 2 года назад

@@reedjeremy5884 lmao

@rudraprakash7948 Год назад

gyaan maat batoo bsdkk

@rajeshvermaiari 2 года назад

Every tutorial video is very well explained theoretically and practically

@johnmarkfule1024 3 года назад

Best react tutorial ever. A million thanks to you Vishwas.

@1stinfamous 4 года назад

Perfect explanations mate you nailed it ! thanks mate ;)

@JamesDoehring 4 года назад

Man these videos are the best. Very therapeutic

@danieljing9319 4 года назад

these videos are amazing really good for beginners thanks

@user-uc9gi2xf8r 3 года назад

oh my GOD, thank you so much for explaining how react uses the key prop to correctly update lists!!!!

@technicalshinchan1669 3 года назад

Thank you so much sir, such type of content providing in free, big fan of you sir.

@VIKASSAINI007 3 года назад

At last someone with correct explanation on Significance of Key

@VIKASSAINI007 3 года назад

I came back after 11 months to realies that "key" are this important and this same video is good explainition

@carlosencalada2083 5 лет назад

Excellent explanation!

@Nikita-iv4jp 3 года назад

Thank you for the clear explanation

@lathagm666 9 месяцев назад

Completed video 18. Thank you 🙂

@narasimhak6626 3 года назад

thank you so much .each and every point perfect explanation :)

@visweswarbk7611 2 года назад

Thank you ! great presentation !

@fail-fixer 3 года назад

Excellent explanation to key.

@jithinwilfred8633 Год назад

Lots of info, thank you so much✨

@AllinOne-pd2zo 5 лет назад

Thank u for ur beginners react tutorial . We are waiting for react redux for beginners thanks u...

@keerthivasanj6170 4 года назад

Connecting the next video topic at last minute of the current video makes me to bite the nail 😂

@abishekbaiju1705 Год назад

Thanks for the nice explanation

@hatembenchikh6996 3 года назад

broooooooo you are the beeeeeeest react developer !!!

@vaibsify 2 года назад

awesome explanation 🙏

@harshvardhansingh780 2 года назад

What a explanation 🔥🔥

@irfk4173 3 года назад

Awesome. Now I get it!

@dhl4102 4 года назад

Very good explanation about the Key attribute. What if there is no UNIQUE key index? any way to let the system create one?

@itgiants5218 2 года назад

dude any question comes to my mind is directly been answered by you, hat off for the effort you're providing, I asked myself hmmm am I able to use key prop in the child then straight forward you mentioned that we cannot.-

@asifurrahman5436 3 года назад

Best teacher ever

@rahulghosal5893 3 месяца назад

Bruce, Clark, Diana, YOu definitely a DC fan

@ankurgupta4696 3 года назад

wow awesome explanation you are awsm

@arios0312 5 лет назад

You are such a great teacher

@aanya4818 3 года назад

4:15 nicely well explained theory (y)

@AAKSHAS 2 года назад

1:44 re-written as const personList = persons.map((personTempObject) => ( ));

@aanya4818 2 года назад

@@AAKSHAS Thank you

@gururajmoger8649 5 лет назад

Nice.. please make reusable components and buttons to pass the values from components each other..and doing different functions for different components..

@AshishGupta-be2yz 2 года назад

while doing some projects I faced a lot of confusion on key props. You made a good clarity with nice and easy explanation. Thanks a lot!!!

@MylesGmail 5 лет назад

Thx I tweeted this

@Leen-Odeh287 9 месяцев назад

Thank you!

@HarshRajAlwaysfree 2 года назад

deserves all the likes

@narendrakanneti2966 5 лет назад

Tq u..

@Aditya.Santra 2 года назад

Amazing Video

@apurvkshirsagar1438 3 месяца назад

Awesome!!

@MuhammadUsman-rp3ph 4 года назад

a perfect video

@vigneshgvs 2 года назад

Key is a reserved prop. and need to include when creating list of elements

@blackpurple9163 Год назад

I was using the key attribute on the ul tag and tr tag in table, which element should I use the key attribute on in the map() function? The first element in the map?

@LotfiORouis 3 года назад

Thanks for the video. How can we get the KEY value of an element we, for instance, click on. Is there something like event.target.key???

@joys7763 5 лет назад

First of all thanks a lot for your videos, as these are really nice tutorial for beginner. I have one question, at 7:31 you said that it iterate both the list, is that means it kept a copy of the original list in the memory and then create another list where it will add the new item and compare both the list?

@mohamedbaha-eddinebouzerou3269 5 лет назад

we can never work on the original list always we make a copy and work on it

@toannew 3 года назад

0:55 add a unique key to each item in the list 2:39 -3:49 key prop is not accessible 3:55 -- why need key prop? 7:09 summary

@MubasharAli-op5vq Год назад

The course is literally awesome but I need these slides which he showed in the video. Where can I get those?

@AjaySingh-xd4nz 3 года назад

The only regret I have while watching these videos, wish I had landed here before!!!

@KevinEontrainer381 4 года назад

So basically the map method is a glorified foreach...

@ssk191998 3 года назад

not really

@simple8810 3 года назад

nope

@nandantendulkar9786 5 месяцев назад

The difference between map() and forEach() is that map() returns the new array whereas the forEach() doesn't return anything.

@fatimaalam9924 5 месяцев назад

Map is way better when you are actually chaining the code as for each doesn't return wanna array while map does so...

@maildlp 4 года назад

what happens when the id remain same but the value inside changes ? wlll react update that?

@debanjanbarman7212 4 года назад

the Id should be unique, you can use the Array index as an id.

@amirrafiq 2 года назад

Oh Ho, Mann Mai Hai Vishwas, Poora Hai Vishwas, Hum Honge Kaamyaab Ek Din :P Thanks bro

@MS-db9xk 3 года назад

Love to learn with you react, but I am missing some exercises in between the topics where I can check my knowledge. Somehow like the RU-vidr Mosh is providing in his Tutorials.

@rajeshvermaiari 2 года назад

Mosh is also good in explaining practically and theoretically

@sanhitapal2463 2 года назад

informative

@rishabhshairy972 4 года назад

when we try to return multiple line .... it gives key error

@adityadev2825 3 года назад

Awesome

@BrantK147 2 месяца назад

Wait, so if the key is not accessible in the child component, why do the examples in the second part of the video show the key being used in the child component jsx? I'm confused.

@nikhilchandraroy1094 4 года назад

I just used key={Math.random()} working perfect no need to worry about too much

@swatkats9073 4 года назад

Different calls to math random can give the same number as output.

@akshatsethi6384 4 года назад

Also everytime it generates a new Id whenever anything updates the list

@saitejamahankali483 2 года назад

@Codevolution Can you share the PPTs ?

@skrandelhex 2 года назад

I'm not getting the unique "key" prop warning (or any warning) in the console. Do more recent versions of react no longer necessitate the declaration of key props in circumstances in which it was formerly required? Edit: Nevermind. Just got the warning. Fml...