Controlled vs Uncontrolled Inputs in React

• Controlled Input: (Preferred way)
  • Input value that is controlled by React. The value is set by the components state and any changes to the input value is handled by the components event handlers

      const [value,setValue] = useState('')
      //handleChange function
      return (
          <input value={value} onChange={handleChange}/>
      )
  

• Uncontrolled Input:
  • Input value is managed by the browser DOM. This means the component doesn't keep track of the input value and changes are handled by DOM.

      const handleSubmit = (event) => {
          const formData = new FormData(event.target)
          const value = formData.get('input123')
      };
  
      return (
          <form onSubmit={handleSubmit}>
              <input name="input123"/>
          </form>
      )