React JS Forms - Controlled Inputs - Learn ReactJS

This beginner React lesson builds controlled form and search input components whose values are managed through React state. It also covers submitting items, persisting state with localStorage, filtering search results, and restoring input focus with useRef.

Syllabus

Intro
Set up and clean up
Creating a Form Component
Adding CSS Styles to the form
Sending props to the form component
Making a controlled input component
The handleSubmit function
The addItem function
The setAndSaveItems function - D.R.Y. don't repeat yourself
Adding new items
Loading state from localStorage
Search Functionality
Building the search input component
Props for the search input component
Completing the controlled search input component
Adding search functionality with filter
Review of Controlled Form Input Components
The useRef hook