Skip to content

Instantly share code, notes, and snippets.

@samuraijane

samuraijane/react-104.md

Last active October 3, 2022 02:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save samuraijane/43dd58ce97b3708ead1a8b5b0d9d0831 to your computer and use it in GitHub Desktop.
Save samuraijane/43dd58ce97b3708ead1a8b5b0d9d0831 to your computer and use it in GitHub Desktop.
Download ZIP
React 104 – Controlled components
Raw
react-104.md

React 104

Controlled components

  • The state of form elements in an HTML/JavaScript project is tracked by <1>.
  • A controlled component in React is really just a regular <2> that you are already familiar with.
  • But the term refers to a component that has a form element whose <3> is tracked by <4>.
  • The value of an <input />, for example, in a controlled component is set by the <5> part of the useState hook.
  • If an <input /> does not have a <6> attribute, its state is controlled by HTML.
  • Changes in state cause a React component to <7>.
  • When component goes from controlled to uncontrolled, React will throw a <8>.
  • The onChange event listener listens to every <9>.
  • The <input /> of a controlled component will always have the <10> event listener as one of its attributes.
  • A controlled component must implement the <11> as well as have attributes for value and onChange on the <input /> element.

Key terms and phrases

  1. component
  2. HTML
  3. keypress
  4. noun
  5. onChange
  6. re-render
  7. React
  8. state
  9. useState hook
  10. value
  11. warning
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment