react state is undefined inside the function

Question

I have a simple signup form. When the form is submitted, in the handleSubmit function, i don't have the access to any of the states. What am I doing wrong here?

    const Signup = () =>{
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [username, setUsername] = useState('');

     const handleSubmit = (e) => {
      e.preventDefault()
      console.log(email)  #undefined

     }
    }

Edit:

import React from "react";
import {useState, useEffect} from 'react';

const Signup = () =>{
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [username, setUsername] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault()
    debugger
    # email passord username are not available here
    console.log({email}) 

  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text"
                     className="form-control"
                     placeholder="Enter Username"
                     value={username}
                     onChange={(e) => setUsername(e.target.value)}/>
      <input type="email"
                     className="form-control"
                     placeholder="Enter email"
                     value={email}
                     onChange={(e) => setEmail(e.target.value)} />
    </form>
  )
}

export default Signup;

if it do console.log({email}) it does return the value. How can i get all the state values. Do i have to do something like this const handleSubmit = (e, {email username password})

Answer 1

In react, to display a variable(such as a state variable) you should place the variable in {}.

For example Try this:

const Signup = () =>{
 const [email, setEmail] = useState('');
 const [password, setPassword] = useState('');
 const [username, setUsername] = useState('');

 const handleSubmit = (e) => {
  e.preventDefault()
  console.log({email} + "-" + {username} + "-" + {password}) 
 }
}

As other example:

const [value, setValue] = useState('');
.
.
<input type="text" value={value} />

Answer 2

Its always a better idea to have all the state at same object rather than multiple state. Here is the cleaner approach and it solves the issue also, since everything will be tracked by same state object it much easier to refactor as well.

import React from "react";
import { useState, useEffect } from "react";

const App = () => {
  const [formData, setFormData] = useState({
    email: "",
    username: ""
  });

  const handleChange = (key, value) => {
    setFormData({
      ...formData,
      [key]: value
    });
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        className="form-control"
        placeholder="Enter Username"
        value={formData.username}
        onChange={(e) => handleChange("username", e.target.value)}
      />
      <input
        type="email"
        className="form-control"
        placeholder="Enter email"
        value={formData.email}
        onChange={(e) => handleChange("email", e.target.value)}
      />
      <button type="submit">submit</button>
    </form>
  );
};

export default App;

Link to Codesandbox: https://codesandbox.io/s/serene-bogdan-s8stm9?file=/src/App.js:0-924