Basic survey form

[Notchoaveragejoe]

I am currently building a basic react form, however, my css isnt displaying and my functions dont seem to work properly what am I not understanding?

import React, { useState } from "react";
import "./App.css";
import "./index.css";
 

function App () {

  const [values, setValues] = useState ({
    firstName: '',
    lastName: '',
    email: '',
  });

  const handleFirstNameInputChange = (event) => {
    event.persist();
    setValues((values) => ({
      ...values,
      firstName: event.target.value,
    }));
  };
  
  const handleLastNameInputChange = (event) => {
    event.persist();
    setValues((values) => ({
      ...values,
      lastName: event.target.value,
    }));
  };
  
  const handleEmailInputChange = (event) => {
    event.persist();
    setValues((values) => ({
      ...values,
      lastName: event.target.value,
    }));
  };

  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (event) => {
    event.preventDefault();
    if(values.firstName && values.lastName && values.email) {
      setSubmitted(true);
    }
    setSubmitted(true);
  };

  const [valid, setValid] = useState(false);

  return (
    <div class="form-container">
      <form class="register-form" onSubmit={handleSubmit}>
        showSuccess && <div class="success-message">Success! Thank you for registering</div>
        <input
          id="first-name"
          class="form-field"
          type="text"
          disabled={showSuccess}
          placeholder="First Name"
          name="firstName"
          value={values.firstName}
          onChange={handleFirstNameInputChange}
        />
        submitted && !values.firstName && <span id="first-name-error">Please enter a first name</span>

        <input
          id="last-name"
          class="form-field"
          type="text"
          placeholder="Last Name"
          name="lastName"
          value={values.lastName}
          onChange={handleLastNameInputChange}
        />
        submitted && !values.firstName && <span id="last-name-error">Please enter a last name</span>

        <input
          id="email"
          class="form-field"
          type="text"
          placeholder="Email"
          name="email"
          value={values.email}
          onChange={handleEmailInputChange}
        />
        submitted && !values.email && <span id="email-error">Please enter an email address</span>

        <button class="form-field" type="submit">Register
        </button>
      </form>
    </div>
  );
}


export default App;

[kevinSmith]

<div class="form-container">

Well for one thing, in React, you can’t use the word “class”. You use it in HTML, but React is JavaScript and “class” is a reserved word. So, you have to use the word “className”.

[lasjorg]

• Open up the console and look at the error, showSuccess is undefined.

• The expressions you have inside the JSX need to be inside brackets {}.

• The input validation doesn’t seem right. I might suggest using an error object with properties for each input.

• You are using !values.firstName for both first and last name.

• handleEmailInputChange is setting the wrong value.

---

Just as an aside, proper form validation is not the easiest thing and most people use a library for it. Not just to save time but also to make sure the validation is solid.

React form validation solutions: An ultimate roundup - LogRocket Blog