Controlled & Uncontrolled forms

Controlled and Uncontrolled form inputs React.js

Hi in this article we'll learn about the controlled and uncontrolled inputs wich allows to manage forms
this info will help you to choose the best option

Basically when somebody asked you what are controlled and uncontrolled forms?, you can answer, the controlled forms are linked by the state on React and the uncontrolled are attached to the dom native handling so lets see ->

The uncontrolled input handlers:

the uncontrolled component indicates that the info will taken by a uncontrolled way, that means we have to catch the data linking the input to the state directly using a useState waiting for the submit in order to make something, so the input state (initial values, changes on the input etc.) are not handled by react just handled by the dom nativelly such as value tag, etc.)

import React, { useState } from 'react';

function App() {

  const [search, setSearch] = useState('')

  const submit = (e) => {
    e.preventDefault();
    setSearch(e.target.search.value);
  }

  console.log(search);

  return (<>

    <form onSubmit={submit}>

      <input
        type='text'
        name='search'
        autoComplete='off ' ></input>
      <button> submit </button>
    </form>
  </>
  );

}
------------------- Example 2 -------------------

import React, { useState } from 'react';

function App() {

  const [search, setSearch] = useState('')

  const submitTwo = (e) => {
    e.preventDefault();
    setSearch(e.target.value);
  }

  console.log(search);

  return (<>
    <form>

      <input 
        type='text'  
        name='search' 
        autoComplete=' off ' 
        onChange={submitTwo} ></input>
      <button> submit </button>

    </form>
  </>

  );
}

export default App;

as you can see the input uncontrolled catch the info at the moment you clicked on the button it didn't catch out before or during the typing process.
you are able to click on it 'n' times also it means you're able to get the info but it's not dynamic or reactive

friendly reminder put attention on the onClick event and onSubmit that's the key

why uncontrolled?? it means the info will be catched once we submit and call the handler, it's less dynamic and we are not able to sanitize while we are typing, and we'll need to sanitize every info on an input filed but in this uncontroled, it's posible but just when we request it out , it is not wrong or bad it's just uncontrolled , it doesn't mean is wrong or something bad it is uncontrolled and has it's own benefits.

The controlled input handlers:

the controlled form handle inputs means to a handle way by react (initialvalue, changes on the input etc.) wich allows to get each piece of data since it been filled, it's so helpful cause along with a format data function it can be formatted while the info is adding to the input also your able to apply the functionality you wants imagination is the limit

import React, { useState } from 'react';

function App() {
  const [search, setSearch] = useState('')

  const submitOne = (e) => {
    e.preventDefault()
    setSearch(e.target.value)
    console.log(search)
  }

  const sentInfo = (e) => {
    e.preventDefault()
    console.log(search)

  }

  return (<>

    <form onSubmit={(e) => sentInfo(e)} >

      <input
        type='text'
        name='search'
        autoComplete='off'
        value={search}
        onChange={submitOne}
      ></input>
      <button> submit </button>
    </form>

    <p>{search}</p>
  </>

  );
}

export default App;

friendly reminder the value it's important in order to complete this controlled input format

this value on the input will take each typed piece of info and along with a external matching function will help to check each character in order to get just the required onces

also like this doc shows each once is correct and useful just choose what's the best option, in regards the project you're working with so smile and keep coding.