React JS Lists and Keys | Learn ReactJS
ฝัง
- เผยแพร่เมื่อ 21 ก.ค. 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
In this tutorial, we will learn React JS Lists and Keys. You will discover every element in a list within ReactJS needs a key. You will also learn how to generate a dynamic list of elements within the JSX of React.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a Learn React tutorial series playlist:
• React Tutorials
🔗 Higher Order Functions tutorial: • Higher Order Functions...
🔗 localStorage tutorial: • JavaScript LocalStorag...
🔗 Source Code for this tutorial: github.com/gitdagray/react_li...
React JS Lists and Keys | Learn ReactJS
(00:00) Intro
(00:05) Tutorial Setup
(01:30) Changing the default state
(03:02) View the new state in React Dev Tools
(03:57) Displaying list items with map()
(06:23) Lists of elements need keys
(07:17) Previewing the React list
(07:35) Adding the react-icons package
(12:39) Applying CSS styles to the React list
(15:20) Why we don't see a checkmark when we click
(15:52) Adding an onChange listener
(18:24) The handleCheck function
(22:05) View the new component state in React Dev Tools
(23:19) Saving state to localStorage
(24:08) Adding an onDoubleClick listener
(25:12) Adding conditional CSS styling
(26:07) Adding an onClick listener
(27:40) The handleDelete function
(29:32) Adding an empty list message
(32:07) When will we load state from localStorage?
🚩 Quick note:
1) In the tutorial, I save react-icons as a dev dependency like this:
npm i react-icons -D
...but we're going to eventually need the icons in production, so you can save it like this instead:
npm i react-icons -S
...if you saved it as a dev dependency, you can move it to production like this:
npm i react-icons --save-prod
🔗 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 Lists and Keys in React JS helpful? If so, please share. Let me know your thoughts in the comments.
#react #lists #keys - วิทยาศาสตร์และเทคโนโลยี
![ตีสิบเดย์ [FULL] | คู่รักแซฟฟิก "หลิงหลิง - ออม" จากซีรีย์ "ใจซ่อนรัก"](http://i.ytimg.com/vi/zs8AfphGn2w/mqdefault.jpg)
When you generate a dynamic list of elements in React's JSX, each element in the list needs a key attribute. This tutorial explores how to generate a list with the higher order function map() and apply the required keys to each element. In addition, this tutorial expands the project and builds out some additional functionality for the list items applying what was learned in the previous tutorials in the series. A link to the full Learn React playlist is above in the description. If you are new to Javascript, I recommend starting with my full 8 hour Javascript tutorial for beginners here: th-cam.com/video/EfAl9bwzVZk/w-d-xo.html
im actually grateful. this time when i felt stuck i looked for your series . im excited to see react differently through your teachings.
Glad I could help!
I've found your channel today and have already cleared all my doubts. Your examples are way easier to understand. Thanks a lot.
I'm glad to hear that! You're welcome!
You have a knack for breaking down the complex things into simple ones. Really loved these lectures. Thank you very much
Glad you like them!
Dave i can tell you’re a natural teacher. The way you explain reason why you do certain things makes so much sense to me. Kodus
Thank you 🙏 I appreciate your kind words 💯
your tutorial is top quality, extremely neat and to the point, helps a lot, great thx
You're welcome!
Thank you Dave!
I'm watching this series as a nice React refresher and to pick up some tips. Didn't know about React Icons, so thanks for that!
You're welcome! 💯
I'm so happy to find your channel. Your videoes are very useful. Thank you so much.
You're welcome!
Every thing is explained with shortcut keys. I am feeling that in near future it turns me out as a cool developer. Bundle
thanks, Dave Gray!🤩🤩
You're welcome!
@@DaveGrayTeachesCode pleasure of mine Sir!
it was rather complicate and not easy to learn but now im excited to see react differently through your teachings. It started to clear up little by little .great thx
Glad to hear it!
Hi Dave, I don't know how to thank you. Thank you so much for your great tutorials.
You're very welcome!
New to your channel, and just subbed. Great tutorial series, many thanks. I come from a old school html/JS/Jquery background - it really does look weird when I see "html like" (JSX) code within javascript. So far it seems more disorganised to me.
I understand. I think you'll get used to it. Same happened to me!
Thanks Professor
I read that keys are needed for react to detect the changes (add, update and delete) in a list but I know it worked for me without them and I was wrong,
I just discovered that react will use list indexes for keys if not explicitly assigned which explain why id did work for me.
With all my current workload, I feel like I still need to do my homework as a student,
Thanks Dave,
Good note Ahmad. Yes, index should be available. Without explicit assignment of keys, I believe an error will show in the console while the JSX may still render. 🤔😃
Hey Dave,
I am following your tutorial and was confused with onDoubleClick event listener as it wasn't needed in my case. The only difference in my code is that I had to use htmlFor attribute for a label as otherwise I was getting an error.
I installed eslint following some tutorial online and airbnb styleguide but that has many unexpected quirks, especially when following tutorials.
Would be great to see a video about your working environment setup and yes I already watched your top 5 VS Code extensions for beginners.
Great content and I love how you keep mentioning useful shortcuts when working with the code editor as it extremely helpful.
Thanks for the notes! My working VS Code setup is pretty much what you see in the tutorials. I know some that add a lot to theirs, but I keep it very plain. The bracket pair colorizer 2 extension does help me and I usually keep prettier running, too.
Thank you. I was wondering if you used any linting rules // style-guides but I guess is the best to keep things simple at the beginning as my example shows.
Often you mention keyboard shortcuts but I might have missed how do you change multiple items at the same time Ctrl + D?
@@notusedbrain you are right - Ctrl + D will select multiple instances and let you edit them all at once.
Thank you sir!
You are welcome!
Love your work
Thank you!
thanks Dave
You're welcome!
I am rooting for you to reach the 100k milestone 💯
Thank you! 💯🚀
Thank you for great tutorial.
i change the status with a for loop.
i want to know, is Maps performance is better then for loop? thank you.
You're welcome! I prefer map. I haven't looked into the performance. I'm guessing if there is a difference, it would be very small.
Thank you Sir!
Welcome!! 💯
Thank you
You're welcome!
I get more comfortable with react the more i advanced with this series
Can you explain why we need to spread ...item in Line 24. I understand items.map loops through items and stores the object into item. We then check if item.id === id that was passed in. If True we need to spread item. This is where i'm confused. Couldn't we just say ? !item.check: item)'. Thanks
Hi Steven, I'm going by memory as I have many videos, but you can provide a timestamp with your questions if you want to provide a specific reference. When you update the state of an object, you need to spread in all the properties. If you do not, you will erase them all. I go into detail with examples about this at the 10 minute mark of this video: th-cam.com/video/yvTGXH7uybA/w-d-xo.html
11:40 - I've been developing HTML for a few years and it's only now I've come across tabIndex is. I'm assuming that keeping it at '0' means that the browser determines the tab order as opposed to the developer. Is that right?
If you were going to set a tab index order, I suppose we could do so by using the curly braces and adding a reference to the index 'i' argument in the .map function. Is it a bad idea to set a tab order?
Good questions! The assumption about how tabindex works is not quite accurate. A tabindex of 0 puts the element in the sequential tab order. More on tabindex here: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex Thanks for the note! 💯
@@DaveGrayTeachesCode Thanks. That makes sense.
@@DaveGrayTeachesCode Is the reason you decided to add tabindex to the trashcans to improve accessibility for keyboard users? Thanks
As a react beginner I can tell this a very important video
Absolutely! Thanks for the comment.
why yours .map works without a return statement, but mine doesn't?
Thank you again!
Please explain handlecheck conditon
Please explain handlecheck condition
Commenting for the algorithm
What is your icon theme?
vscode-icons
One request: can you repeat the development in the above part, with the useReducer?
Excuse me, 20:23
Q1:I can't understand what meaning is? { ...item, checked: !item.checked }
I understand { ...item} or {checked: !item.checked }, but { ...item, checked: !item.checked }, I can't understand, can you explain it?
Q2:Why use ...item? I know it is spread syntax.. but I can't understand why "...item" is work in the Ternary Operator?
I've been thinking about it for a long time.
(I have seen map(), Spread_syntax and Ternary Operator in MDN)
If my memory is correct you are working with todo list items here. The object is one item. An item has multiple properties. When you see the spread operator here, we are spreading in the properties of the item to create a new object. The comma is added in order to add one more property to the object. If we add a property that already exists like the property checked, then the new property checked will overwrite the previous one. So in the example you are asking about, we spread in the properties including the existing checked property, but then we overwrite the checked property with the opposite value (true or false).
@@DaveGrayTeachesCode thanks for the clear explanation! I had the question
Loved your teaching style. Just Amazing
Glad to hear that!
Top
npm i -D is same as save dep not save
const handleCheck = (id) => {
const listItems = items.map((item) => item.id === id ? { ...item, checked: !item.checked } : item);
setItems(listItems);
above code is totally confusing for me why to ...item spread items could you explain in a bit laymen term????
Hi Lavesh. When you first spread in item, it has all of the object properties. You follow it with a comma and then provide the checked property to overwrite the previous checked value. It is a true/false, yes/no type of value so when we say !item.checked, it sets it to the opposite of what it was before.
@@DaveGrayTeachesCode thanks dave got it. :)
7:17
why is it parentheses() instead of curly bracket{} after arrow ?
{items.map((item) => ( //why is it not curly bracket?
{item.item}
Delete
))}
That's a good question, and I realize it is different from what you typically see in Javascript functions. Parenthesis group multiple lines of code in a return. In your example, I used map() which is a higher order function. It returns values and the value being returned in this example is on several lines of code. I hope that helps!
@@DaveGrayTeachesCode Thank you for your explanation!!
@@aya2222 you're welcome! 🙏
welp now this is when it starts getting hard
I totally confused in this video