Edison  Stark

Edison Stark

1625542074

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.

πŸ”— Source Code for this tutorial: https://github.com/gitdagray/react_controlled_inputs

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:
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

πŸ”— React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

πŸ”— Styled Components: https://styled-components.com/

πŸ“š References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library)
React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location=

βœ… Follow Me:
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/DaveOnEleven

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

#react #reactjs

React JS Forms | Controlled Inputs | Learn ReactJS