React JS Forms | Controlled Inputs | Learn ReactJS

React JS Forms utilize controlled inputs linked to React state which is a different approach than we learn with HTML and Javascript. Linking React controlled form inputs to React state create a single source of truth for our controlled components.

🚀 This lesson is part of a Learn React tutorial series playlist:

React JS Forms | Controlled Inputs | Learn ReactJS

(00:00) Intro
(00:05) Set up and clean up
(03:06) Creating a Form Component
(07:44) Adding CSS Styles to the form
(09:24) Sending props to the form component
(11:47) Making a controlled input component
(13:58) The handleSubmit function
(17:52) The addItem function
(21:04) The setAndSaveItems function - D.R.Y. (don't repeat yourself)
(22:15) Adding new items
(23:17) Loading state from localStorage
(24:58) Search Functionality
(25:40) Building the search input component
(27:50) Props for the search input component
(29:03) Completing the controlled search input component
(31:34) Adding search functionality with filter()
(33:58) Review of Controlled Form Input Components
(34:32) The useRef hook

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:


📚 References:

✅ Follow Me:

Was this tutorial about Controlled Form Inputs in React JS helpful? If so, please share. Let me know your thoughts in the comments.

#react #controlled #inputs

[ZeeshanMRaje]

I must say this guy is legend, Love & respect from India (Pune)

[toonice]

Very clean way to filter! state stays the same and you just filter the results you pass to the component. very nice! i always created a filtered state but this is so much easier and reduces the need for extra states for no reason.

[fernandosalas]

Please don't stop making React.js videos. You are the best!

[lakshmidesineedi]

Fantastic teacher !!! Thanks Dave i learned a lot from this series.

[sakibcoder]

I'm following your tutorial. I don't know how much I will get but your tutorial seems easy to me. Thanks

[Ujedkemal]

Hi Dave, i just learned a lot form your video. i supposed to learn from your channel since a long time ago . I regret so much to just find your channel a few days ago. thanks a lot dave. big regards from Indonesia

[CODEABC]

I love your teaching method..please make a play list like this one with node. Then make more and more project with mern stack

[subliminakeys]

Huge fan of your videos! Very descriptive and engaging. I especially like how you constantly say the shortcut keys you are using, helps drill those into my head for memory. I want to note though, I ran into an error. You dont address what will happen if local storage is empty and you try to getItem. I got a black screen when i cleared my storage. I added an if statement to check if local storage returns null. If null then I set item to json stringify an empty array. I dont know if its best practice, but it solved my issue.
edit- I seen another comment that addressed this and their solution was better. They just used '|| []' after the localStorage.getItem statement and its much cleaner than another if statement like i had

[akanj]

Thank you for this series, Keep up the great work!

[noir]

Your tutorials are probably the best out there :) Subbed.

[khaledbenshible]

Fantastic, thank you very very....much. Please don't stop making React.js videos

[dusanvulic]

Awesome explained search functionality ! Thank you very much !

[eeedit]

Kudos. Great materials for learning React!

[ahmad-murery]

Very neat project,
One useful functionality to have here is to sort the list items by the checked field so that all checked items moved to the bottom, but we need then to change the id generator function to lookup the list for the max id instead of directly using the last item id + 1, maybe using Array.reduce function,

Idea/suggestion,

maybe after implementing the server-side code we can take the project to just another next level by modifying currently implemented local storage to handle offline usage,
I think a simplified syncing mechanism can be create to push offline marked items to the server,

Thanks Dave,

[rmStd]

Thank you for lesson! But i have one question

Why did you write (item.item) instead of one item?
Isn't the first item already the string itself or have I misunderstood something?

[yajur.bhrdwj]

hey dave since i did not had any data in the local storage, i added this statement in app.js :- const [items, setItems] = || [ ] ); But how should i add data to the local storage before. how did you add data milk and bread before into the local storage?

[kannder]

Thank you for your course. I have really learned a lot of things.

[abdulrahmanagboolaosho]

another excellent tutorial, thanks man

[codingispower]

At what point does the parent component (in this case App.jsx) become too large from lifting all the state up? How can this be optimized or broken out efficienty?

[Netpilation]

Dave i did not really get it there when check for the blank value and prevent it from getting submitted . cause you have already set the value of new item to an empty string and empty sring returns a truthy value