Synthetic Event instead of useState values

Question

I'm newish to React so bear with me as I try to explain the issue. I'm creating an app that pulls all COD customer information and allows the user to search through it, as well as creates a calculator to figure up total charges while on site, however all that is working and stack requires more text than code so I'm really just filling up space in order to post my real question.

I'm woking on an admin page but whenever I hit the submit button to test I keep getting the following :

SyntheticEvent {dispatchConfig: null,etc}

for all 3 fields in the form, and I just can't figure out why. All my console.logs show the fields as null/SyntheticEvent so no information is being passed through.

import React, { useState, useEffect } from "react";
import { registerUser } from "../api";

const Admin = () => {
  const admin = localStorage.getItem("admin");
  const [user, setUser] = useState("");
  const [password, setPassword] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(user, password, email);
    cancelCourse();
  };

  const cancelCourse = () => {
    setUser("");
    setPassword("");
    setEmail("");
  };

  if (!admin) {
    return <div className="pleaselogin">You do not have access</div>;
  } else {
    return (
      <div className="page">
        <form id="create">
          <div>Create User</div>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Name"
            onChange={setUser}
          ></input>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Password"
            onChange={setPassword}
          ></input>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Email"
            onChange={setEmail}
          ></input>
          <button className="submit" onClick={handleSubmit}>
            Submit
          </button>
        </form>
      </div>
    );
  }
};

export default Admin;

Answer 1

I pulled a dumb, working code below

import React, { useState, useEffect } from "react";
import { registerUser } from "../api";

const Admin = () => {
  const main = localStorage.getItem("admin");
  const [user, setUser] = useState("");
  const [password, setPassword] = useState("");
  const [email, setEmail] = useState("");

  const handleRegis = (event) => {
    event.preventDefault();
    // registerUser(user, password, email);
    console.log(user, password, email);
    cancelCourse();
  };

  const cancelCourse = () => {
    setUser("");
    setPassword("");
    setEmail("");
  };

  const changeUser = (event) => {
    setUser(event.target.value);
  };

  const changePassword = (event) => {
    setPassword(event.target.value);
  };

  const changeEmail = (event) => {
    setEmail(event.target.value);
  };

  if (!main) {
    return <div className="pleaselogin">You do not have access</div>;
  } else {
    return (
      <div className="page">
        <form id="create">
          <div>Create User</div>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Name"
            value={user}
            onChange={changeUser}
          ></input>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Password"
            value={password}
            onChange={changePassword}
          ></input>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Email"
            value={email}
            onChange={changeEmail}
          ></input>
          <button className="submit" onClick={handleRegis}>
            Submit
          </button>
        </form>
      </div>
    );
  }
};

export default Admin;

Answer 2

You need to update your calls to setUser, setPassword and setEmail. With current code it's not able to set the exact value that useState is expecting. Need to set something like following:

<input
className="form-input"
id="name"
placeholder="Enter User's Name"
onChange={(event) => setUser(event.target.value)}
/>

I have created on code sandbox for your ref.

Answer 3

Instead of setUser etc use e => setUser(e.target.value)

So your code would be

import React, { useState, useEffect } from "react";
import { registerUser } from "../api";

const Admin = () => {
  const admin = localStorage.getItem("admin");
  const [user, setUser] = useState("");
  const [password, setPassword] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(user, password, email);
    cancelCourse();
  };

  const cancelCourse = () => {
    setUser("");
    setPassword("");
    setEmail("");
  };

  if (!admin) {
    return <div className="pleaselogin">You do not have access</div>;
  } else {
    return (
      <div className="page">
        <form id="create">
          <div>Create User</div>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Name"
            onChange={e => setUser(e.target.value)}
          ></input>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Password"
            onChange={e => setPassword(e.target.value)}
          ></input>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Email"
            onChange={e => setEmail(e.target.value)}
          ></input>
          <button className="submit" onClick={handleSubmit}>
            Submit
          </button>
        </form>
      </div>
    );
  }
};

export default Admin;