bind input value to useState

export function NameForm(props) {
  const { value:firstName, bind:bindFirstName, reset:resetFirstName } = useInput('');
  const { value:lastName, bind:bindLastName, reset:resetLastName } = useInput('');
  
  const handleSubmit = (evt) => {
      evt.preventDefault();
      alert(`Submitting Name ${firstName} ${lastName}`);
      resetFirstName();
      resetLastName();
  }
  return (
    <form onSubmit={handleSubmit}>
      <label>
        First Name:
        <input type="text" {...bindFirstName} />
      </label>
      <label>
        Last Name:
        <input type="text" {...bindLastName} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

Posted by: Guest on June-12-2021

Source

import { useState } from "react"; export const useInput = initialValue => { const [value, setValue] = useState(initialValue); return { value, setValue, reset: () => setValue(""), bind: { value, onChange: event => { setValue(event.target.value); } } }; };

Code answers related to "bind input value to useState"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Answers for "bind input value to useState"

Code answers related to "bind input value to useState"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us