How to solve "cannot read properties of type undefined" when trying to send form input data to the backend? [duplicate]

Question

I am trying to send a username that the user fills out to my server. I already have a post request that sends other information to the server and I would like to use the same post request and just add the new username value into the list of things that im sending. I keep getting this error even though I have given my form input a type="text"

here is my code for the form:

import React, { useState } from "react";

export default function UserForm() {
  const [values, setValues] = useState();

  const onSubmit = async (event) => {
    event.preventDefault();
  };

  function setUserValues() {
    setValues(values.user);
  }

  useState(setUserValues);
  if (values.user === undefined) {
    return;
  }

  return (
    <form onSubmit={onSubmit}>
      <label>User*:</label>
      <input
        type="text"
        value={values.user}
        id="user"
        name="user"
        onChange={setImmediate("user")}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Answer 1

try something like this

import React, { useState } from "react";

export default function UserForm() {
  const [values, setValues] = useState();
  
  const edit = (e) => {
    setValues(e.target.value)
  }

  return (
    <form onSubmit={onSubmit}>
      <label>User*:</label>
      <input
        type="text"
        value={values}
        id="user"
        name="user"
        onChange={edit()}
      />
      <button type="submit">Submit</button>
    </form>
  );
}