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 ponent below in case that helps (I've shortened the code while posting)

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

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 ponent below in case that helps (I've shortened the code while posting)

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

• javascript
• reactjs

• 1 Is there a reason why you've wrapped a simple input element in a react ponent? – cSharp Commented May 6, 2022 at 3:12
• There's nothing to gain here with your Input ponent. Simply use state and controlled ponents – 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./a/69605407/4123627 – Crazybud Commented Mar 15, 2024 at 4:39

2 Answers 2

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

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.

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