React JS Forms - Controlled Inputs - Learn ReactJS

Overview

Learn how to create and manage controlled form inputs in React JS through this comprehensive tutorial video. Explore the process of linking React controlled form inputs to state, creating a single source of truth for controlled components. Discover techniques for setting up forms, adding CSS styles, implementing controlled input components, handling form submissions, and managing state with localStorage. Dive into search functionality implementation using filter() and understand the useRef hook. Follow along with practical examples and gain insights into best practices for building efficient and responsive React forms.

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