ReactJS Tutorial – 18 – Lists and Keys
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703560120_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: ReactJS Tutorial – 18 – Lists and Keys
In this video let’s talk about lists and keys in react in the last video we saw that when we render a list of items react through a morning in the console each child in an array or iterator should have a unique key prop or in simpler words react is
Telling us hey each item in the list rendered using the map operator should have a prop called key and the value to that prop should be unique within the list so let’s add that prop to each item in our list I’m going to go back to vs code and in the nameless component
Within the map method I am going to add the key prop to this prod we need to assign a value that will be unique within the list if I were to assign a string unique as the value what happens is every item rendered will have the same value for
The key problem so the value is not unique within the list typically the ID of the item is a great choice for the key prop value you can see that every person has an ID property whose value is unique within the list so we can assign person dot ID as the value
To the key prop so key is going to be equal to within curly braces person dot ID if we now save the file and take a look at the browser you should not see any warnings in the console and the list is still rendered as expected
Now the keeper of value need not be ID all the time it could even be the name it really can be anything as long as you know for sure it is unique within the list for example I know for sure the name property for each person is unique within the list so
I could have the key props value person dot name now if you take a look at the browser it still works perfectly fine so the key prop is a special attribute you need to include when creating lists of elements now an important point to keep
In mind about key prop is that they are not accessible in the child components for example if I go back to percent chairs and be structure the key prop and try to render it in the JSX you can see that it is not rendered in
The UI if you take a look at the console react throws a warning yet again in the person component key is not a prob trying to access it will result in undefined being returned if you need to access the same value within the child component you should pass it as a different prop
So what react is telling us is hey key prop is something I need to render the list efficiently if you are trying to pass down a value to be used in the child component has it as a different prop he prop is reserved so in any of
Your components do not try to use the key prop to render any data all right so we have understood what exactly is the key prop now let us ask the question why do we need it well it turns out keys help react identify which items in a
List have changed or added or removed and place a crucial role in handling UI updates efficiently let me show you how consider a list of items we have two items to begin with Bruce and Clark now let’s say we need to add another item at the end of the list
How react handles this update is react just iterates over both the lists at the same time and generates a mutation whenever there is a difference in our example react will match the first items in each list and cease there is no difference it then matches the second
Two items and sees no difference and when it tries to match the third item it says that there is a difference and simply inserts the third item into the Dom tree this way instead of tearing down the old tree and building the new tree from scratch react simply updates
The tree by insulting the item at the end of the list nothing else has to change now consider the same initial list of two items Bruce and Clark again let’s say we need to insert a new item to the list but this time we need to
Insert it at the beginning of the list what happens in this situation is that when react iterates over both the lists and makes a comparison it finds out that every item is different react will end up mutating every child instead of realizing it can keep the Bruce and
Clark sub trees intact this inefficiency can be a problem and in order to solve this issue react supports the key attribute when children have keys react uses the key to match the children in the original tree with the children in the subsequent tree now react knows that
The element with key 3 is the new one and the elements with the keys 1 & 2 have just moved so react will preserve the sub tree and simply insert the new item at the top of the list this as it turns out is much more efficient
So to quickly summarize 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 or added or are removed this results in a much more efficient update of the user interface
Now everything works perfectly fine in our code but many a times the list to be rendered could be a simple array which doesn’t have an ID property that uniquely identifies the item what do we do in such a scenario let’s understand that 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
Completed video 18. Thank you 🙂
Thank you!
Thanks for the nice explanation
🌻🐠🦋🍡🍥🍧🎄
The course is literally awesome but I need these slides which he showed in the video. Where can I get those?
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?
Lots of info, thank you so much✨
I have never seen a better tutorial than thiss !!! World class amazing tutorials even in 2022, no one is near you.
thanks for explaining why the framework is built the way it is, not just how to use it. this is real teaching.
Key is a reserved prop.
and need to include when creating list of elements
deserves all the likes
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…
Thank you ! great presentation !
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!!!
awesome explanation 🙏
Every tutorial video is very well explained theoretically and practically
@Codevolution Can you share the PPTs ?
1:44 re-written as
const personList = persons.map((personTempObject) => (
<Person3 key={personTempObject.id} personProps={personTempObject} />
));
hey can i get your react notes?
What a explanation 🔥🔥
Oh Ho, Mann Mai Hai Vishwas, Poora Hai Vishwas, Hum Honge Kaamyaab Ek Din 😛 Thanks bro
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.-
informative
Amazing Video
Thank you so much sir, such type of content providing in free, big fan of you sir.
4:15 nicely well explained theory (y)
💖
wow awesome explanation you are awsm
one can also use Symbols.
oh my GOD, thank you so much for explaining how react uses the key prop to correctly update lists!!!!
thank you so much .each and every point perfect explanation 🙂
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???
Best react tutorial ever. A million thanks to you Vishwas.
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
Yayyy 🙃
But can't we simply use javascript..like .append() or .prepend() method!
Or u can also use elem.injertAdjacentElement()
Best teacher ever
I created some idea by myself about elements that doesn't have key like: const names = ['Mihajlo', 'Daca', 'Djole'];
I added:
var i = 0;
and displayed it all as:
const nameList = names.map(xIme => <li key={i++}>{xIme}</li>);
and had no warnings in a console.
Is that ok to do? 🙂
Awesome. Now I get it!
I really love how you explain things in simple terms
Excellent explanation to key.