Kevin Powell - Community•2w ago

Form React

i see ppl use useState hook when creating forms why would i need it for except for running validation on each input seperatly what is the drawback of using the FormData class

2 Replies

clevermissfox•2w ago

It's a core part of React that forms are controlled components , where the values are handled and saved in state , helps create one source of truth, access to the values for conditional rendering or styles , simpler validation etc

import  { useState } from 'react';

export default function ControlledFormInput() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
<label>
    <input
      type="text"
      value={inputValue}
      onChange={handleChange}
    />
</label>
  );
}

import  { useState } from 'react';

export default function ControlledFormInput() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
<label>
    <input
      type="text"
      value={inputValue}
      onChange={handleChange}
    />
</label>
  );
}

Obviously we often have a <form> with more inputs , so this is just a quick example of a common pattern

Duckit69OP•6d ago

i get it that this is how it works my idea is this adds compelxity unless you must control an input field there is no justified use for the useState for each input

Gaming

Programming

Form React

Did you find this page helpful?