How to get input value on form submission in React

Question

I'm new to React and have been trying to make a registration form, but I couldn't find a way to get data from my input when a button is clicked (onClick)


function App() {

  const userData = []

  function handleClick() {
    //get input data here
  }

  return (
    <div className="form-main">
      <div className='em'>
        <label className='label '> User e-mail </label>
        <Input type="email" />
      </div>
      <div className='pw'>
        <label className='label '> Password </label>
        <Input type="password" />
      </div>

      <button type="submit" className="submit-btn" onClick={handleClick}>Signup</button>
      
    </div>
  );
}

I've shared my input component below in case that helps (I've shortened the code while posting)


function Input(props) {
    return (
        <input type={props.type} className="input"></input>
    );
}

Is there a reason why you've wrapped a simple input element in a react component? — cSharp
– cSharp, Commented May 6, 2022 at 3:12
There's nothing to gain here with your Input component. Simply use state and controlled components — Phil
– Phil, Commented May 6, 2022 at 3:22
If you have multiple inputs or form elements, it is easier to let the form control the data. Refer this: stackoverflow.com/a/69605407/4123627 — Crazybud
– Crazybud, Commented Mar 15, 2024 at 4:39

John Detlefs · Accepted Answer · 2022-05-06 03:57:33Z

2

Your form inputs are uncontrolled - https://reactjs.org/docs/forms.html#controlled-components

Updates to the value of the input aren't being registered by React. A quick stripped down working version to give you an idea of how it works:

const Form = () => {
   const [email, setEmail] = useState('');

   const handleSubmit = (event) => {
       event.preventDefault();
       // ... do something with email
   }

   return (
      <form onSubmit={handleSubmit}>
         <input type='email' value={email} onChange={(e) => { setEmail(e.target.value) }} />
         <button type='submit'>Submit</button>
      </form>
   );
}

In this way React is 'controlling' the input and you can do whatever you like with the email value in the handleSubmit() function.

edited May 6, 2022 at 3:57

answered May 6, 2022 at 3:46

John Detlefs

1,0371 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hritik Sharma · Accepted Answer · 2022-05-06 04:09:55Z

0

You can make use of useRef here . Just call handleSubmit when submit button is clicked as shown below .

const Form = () => {
   const emailRef = React.useRef(null);

   const handleSubmit = (event) => {
       event.preventDefault();
       // ... make use of your email data entered inside input 
       console.log(emailRef.current.value) // consoles the email

   }

   return (
      <form onSubmit={handleSubmit}>
         <input type='email' ref={emailRef} />
         <button type='submit' onClick={handleSubmit}>Submit</button>
      </form>
   );
}

You can get more clarity on useRef here official doc

answered May 6, 2022 at 4:09

Hritik Sharma

2,0361 gold badge11 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to get input value on form submission in React

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related