React JS Lists and Keys - Learn ReactJS

Overview

Learn how to work with lists and keys in React JS in this comprehensive tutorial. Discover the importance of assigning unique keys to list elements and generate dynamic lists within JSX. Explore topics such as changing default state, using the map() function to display list items, adding react-icons, applying CSS styles, and implementing event listeners for user interactions. Master techniques for handling state changes, saving to localStorage, and adding conditional styling. By the end of this tutorial, you'll be able to create, manipulate, and style dynamic lists in React, enhancing your ability to build interactive user interfaces.

Syllabus

Intro
Tutorial Setup
Changing the default state
View the new state in React Dev Tools
Displaying list items with map
Lists of elements need keys
Previewing the React list
Adding the react-icons package
Applying CSS styles to the React list
Why we don't see a checkmark when we click
Adding an onChange listener
The handleCheck function
View the new component state in React Dev Tools
Saving state to localStorage
Adding an onDoubleClick listener
Adding conditional CSS styling
Adding an onClick listener
The handleDelete function
Adding an empty list message
When will we load state from localStorage?