TypeError: Cannot read properties of null (reading 'name') for [event.target.name]: event.targe.value

Question

I'm creating a simple controlled component form in react. When I console log event.target.name on onChange event it logs fine but when I setState using computed property name of the object in javascript it gives me an error TypeError: Cannot read properties of null (reading 'name') This never happened before and I've created many working projects where I created the form similar way. Could you please explain why all of sudden these issues occurring to me? import "./Contact.css"; import React from "react";

const Contact = () => {
  const [contactFormValues, setContactFormValues] = React.useState({
    fName: "",
    lName: "",
    email: "",
    phone: "",
    message: "",
  });
 
  const handleChange = (event) => {
    setContactFormValues((prevValues) => ({
      ...prevValues,
      [event.target.name]: event.target.value, // Here, this line gives me error
    }));
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    console.log(contactFormValues);
  }
  return (
    <>
      <div className="contact-form">
        <div className="contact-container">
          <div className="left-section">
            <div className="title">
              <h1>Write Us</h1>
            </div>
            <div className="row">
              <div className="contact-sub-row">
                <label className="contact-label">First Name</label>
                <input
                  className="contact-input"
                  type="text"
                  name="fName"
                  onChange={handleChange}
                  value={contactFormValues.fName}
                  required
                />
              </div>

              <div className="contact-sub-row">
                <label className="contact-label">Last Name</label>
                <input
                  className="contact-input"
                  type="text"
                  name="lName"
                  onChange={handleChange}
                  // value={contactFormValues.lName}
                  required
                />
              </div>
            </div>

            <div className="contact-sub-row">
              <label className="contact-label">Email</label>
              <input
                className="contact-input is-success"
                type="email"
                name="email"
                onChange={handleChange}
                // value={contactFormValues.email}
                required
              />
            </div>

            <div className="contact-sub-row">
              <label className="contact-label">Phone</label>
              <input
                className="contact-input"
                type="tel"
                placeholder="1-123-456-7890"
                maxlength="20"
                name="phone"
                onChange={handleChange}
                value={contactFormValues.phone}
                required
              />
            </div>
          </div>
          <div className="right-section">
            <div className="your-message">
              <label className="contact-label">Message</label>
              <textarea
                className="contact-textarea"
                name="message"
                placeholder="Write text here..."
                onChange={handleChange}
                value={contactFormValues.message}
                required
              ></textarea>
            </div>
            <div className="contact-btns">
              <button className="submit-btn" onClick={handleSubmit}>SEND MESSAGE</button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Contact;

Answer 1

Wrap the inputs in a form tag element.
and try this:

const handleChange = (event) => {
    const { name, value } = event.target;
    setContactFormValues({ ...contactFormValues, [name]: value });
}

I've done this in our very last project.