React JS Lists and Keys | Learn ReactJS

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.

🚀 This lesson is part of a Learn React tutorial series playlist:

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:

🔗 React Dev Tools Extension for Chrome:


📚 References:

✅ Follow Me:

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

[psyferinc.]

im actually grateful. this time when i felt stuck i looked for your series . im excited to see react differently through your teachings.

[webdev]

You have a knack for breaking down the complex things into simple ones. Really loved these lectures. Thank you very much

[zuhayeranzumfuad]

I've found your channel today and have already cleared all my doubts. Your examples are way easier to understand. Thanks a lot.

[fazzyakamello]

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

[AmandeepSingh-sxke]

Your explanation is very clear. Thank you for your videos. Dave

[umarilyas]

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!🤩🤩

[khaledbenshible]

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

[jingli]

your tutorial is top quality, extremely neat and to the point, helps a lot, great thx

[MohammadBarghamadii]

Hi Dave, I don't know how to thank you. Thank you so much for your great tutorials.

[ahmad-murery]

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,

[caffeinated-pixels]

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!

[notusedbrain]

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.

[zakariachajia]

I get more comfortable with react the more i advanced with this series

[jamshidtashkent]

I'm so happy to find your channel. Your videoes are very useful. Thank you so much.

[harag]

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.

[rezamahmoudi]

One request: can you repeat the development in the above part, with the useReducer?

[agroforestryconsultancyroz]

As a react beginner I can tell this a very important video

[mohajeramir]

I am rooting for you to reach the 100k milestone 💯

[fkbey]

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.

[GorritoCodes]

why yours .map works without a return statement, but mine doesn't?

Thank you again!