document.querySelector @ LoginForm lines 35/36

[Chloeh24]

You shouldn't really use the DOM in React since there isn't a real DOM.

• Better to create a state to hold the data, give each input an onChange function which adds to the state and then do a Post request with that final state

• Also adding an error state might be useful for showing users an error e.g. if user already exists

E.G. (this isn't tested but we've done a similar thing)

const LogInForm = (props) => {
  const [error, setError] = React.useState("");
  const [form, setForm] = React.useState({ username: "", password: "" });

  const handleEvent = (e) => {
    let { name, value } = e.target;
    setForm({ ...form, [name]: value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    logInPost(form)
      .then(() => history.push("/feed"))
      .catch((error) => setError(error));
  };

Add handle Event to inputs
 <input
          type="text"
          id="username"
          placeholder="username"
          name="username"
          required
         ** onChange={handleEvent}**
          autoFocus
        ></input>

Can add error at bottom of form
  {error ? <p>{error}</p> : ""} 

Post-fetch.js

function logInPost(logInFormData) {
  const options = {
    endpoint: "logIn",
    body: logInFormData,
    error: "Could not log you in",
  };
  return postFetch(options).then((res) => {
    localStorage.setItem("auth", res.token);
  });
}

Also could pass the error from postFetch function as part of the response to the loginForm

Disclaimer: I looked at this for 30mins, but I have not tested this. This may or may not ruin everything