Accessing Data from a form REACT

function Form() {

  return (
    <form>
      <label>
        Name:
        <input type="text" />
      </label>
      <button type="submit">Submit</button>
      <button type="button">Reset</button>
    </form>
  );
}

export default Form;


function Form() {
  const [inputValue, setInputValue] = useState('');

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

  return (
    <form>
      <label>
        Name:
        <input type="text" value={inputValue} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
      <button type="button">Reset</button>
    </form>
  );
}

export default Form; 


// NOW ADDING FORM SUBMISSION BUTTON HANDLER AND RESET BUTTON HANDLER


function Form() {
  const [inputValue, setInputValue] = useState('');

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(inputValue);
  };
  
  const handleReset = () => {
    setInputValue("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={inputValue} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
      <button onClick={handleReset} type="button">Reset</button>
    </form>
  );
}

export default Form;