Web Dev Roadmap for Beginners (Free!): https://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 ➜ https://bit.ly/3nGHmNn 🚀 This lesson is part of a Learn React tutorial series playlist:    • React Tutorials   🔗 Higher Order Functions tutorial: https://www.youtube.com/watch?v=7BeT6lsudL4 🔗 localStorage tutorial: https://www.youtube.com/watch?v=zmFDvFwj6-8 🔗 Source Code for this tutorial: https://github.com/gitdagray/react_lists_keys 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: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets 🔗 React Dev Tools Extension for Chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi 🔗 Styled Components: https://styled-components.com/ 📚 References: ReactJS Official site: https://reactjs.org/ React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library) React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location= ✅ Follow Me: Twitter: https://twitter.com/yesdavidgray LinkedIn: https://www.linkedin.com/in/davidagray/ Blog: https://yesdavidgray.com/ Reddit: https://www.reddit.com/user/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