React JS Lists and Keys - Learn ReactJS

This beginner tutorial demonstrates how to render and manage a dynamic list in React using keyed JSX elements, state updates, event handlers, conditional styling, and localStorage.

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?