title: TypeError: Cannot read property 'email' of undefined - React.js
body: <p>I was trying to use the form below, but when I press the <em>Sign up button</em>, that is supposed to be submitted and show <code>&lt;SignUpFormSuccess /&gt;</code> if there are no errors, but suddenly when I press it, my browser says: <em>TypeError: Cannot read property 'email' of undefined</em> <strong>SignUpUser
  src/components/SignUp/SignUpUser.js:23</strong>. Does anyone have any idea why?</p>
  <p><strong>My validateInfo.js file</strong></p>
  <pre><code>export default function validateInfo(values) {
      let errors = {};
      //email
  
      if (!values.email) {
          errors.email = 'Email required';
      } else if (!/\S+@\S+\.\S+/.test(values.email)) {
          errors.email = 'Email address is invalid';
      }
  
      if (!values.companyName.trim()) {
          errors.companyName = &quot;Company Name required&quot;
      }else if (!/^[A-Za-z]+/.test(values.companyName.trim())) {
          errors.companyName = 'Enter a valid company name';
      }
  
      //username
      if (!values.username.trim()) {
          errors.username = &quot;Username required&quot;
      }else if (!/^[A-Za-z]+/.test(values.username.trim())) {
          errors.username = 'Enter a valid username';
      }
  
      //fullname
  
      if (!values.fullname.trim()) {
          errors.fullname = 'Full Name required';
      }
      else if (!/^[A-Za-z]+/.test(values.fullname.trim())) {
          errors.fullname = 'Enter a valid Full Name';
      }
  
  
  
      //password
  
      if (!values.password) {
          errors.password = 'Password is required';
      } else if (values.password.length &lt; 6) {
          errors.password = 'Password needs to be 6 characters or more';
      }
  
      return errors;
  }
  </code></pre>
  <p><strong>My useForm.js file looks this way:</strong></p>
  <pre><code>import { useState, useEffect } from 'react';
  
  const useForm = (callback, validate) =&gt; {
    const [values, setValues] = useState({
      username: '',
      email: '',
      fullname:'',
      password: '',
      businessEmail: '',
      companyName:''
      
    });
    const [errors, setErrors] = useState({});
    const [isSubmitting, setIsSubmitting] = useState(false);
  
    const handleChange = e =&gt; {
      const { name, value } = e.target;
      setValues({
        ...values,
        [name]: value
      });
    };
  
    const handleSubmit = e =&gt; {
      e.preventDefault();
  
      setErrors(validate(values));
      setIsSubmitting(true);
    };
  
    useEffect(
      () =&gt; {
        if (Object.keys(errors).length === 0 &amp;&amp; isSubmitting) {
          callback();
        }
      },
      [callback, errors, isSubmitting]
    );
  
    return { handleChange, handleSubmit, values, errors };
  };
  
  export default useForm;
  
  </code></pre>
  <p><strong>SignUpUser.js looks this way:</strong></p>
  <pre><code>import React from 'react';
  import useForm from '../useForm';
  import validate from '../validateInfo';
  import './SignUpForm.css'
  
  
  const SignUpUser = ({submitForm}) =&gt; {
  
      const { handleChange, values, handleSubmit, errors } = useForm(submitForm,validate);
  
      return (
  
          &lt;div className=&quot;form-content-right&quot;&gt;
              
  
  
              &lt;form className=&quot;form&quot; onSubmit={handleSubmit}&gt;
                  &lt;h1&gt;Join our community by setting up your account&lt;/h1&gt;
  
                  &lt;div className=&quot;form-inputs&quot;&gt;
                      &lt;label className='form-label'&gt;
                      &lt;/label&gt;
                      &lt;input
                          type=&quot;email&quot;
                          name=&quot;email&quot;
                          className='form-input'
                          placeholder=&quot;Email&quot;
                          value={values.email}
                          onChange={handleChange}
                      /&gt;
  
  
                      {errors.email &amp;&amp; &lt;p&gt;{errors.email}&lt;/p&gt;}
  
                  &lt;/div&gt;
  
                  &lt;div className=&quot;form-inputs&quot;&gt;
                      &lt;label htmlFor=&quot;fullname&quot; className='form-label'&gt; &lt;/label&gt;
                      &lt;input
                          type=&quot;text&quot;
                          name=&quot;fullname&quot;
                          className='form-input'
                          placeholder=&quot;Full Name&quot;
                          value={values.fullname}
                          onChange={handleChange}
                      /&gt;
                      {errors.fullname &amp;&amp; &lt;p&gt;{errors.fullname}&lt;/p&gt;}
  
                  &lt;/div&gt;
  
                  &lt;div className=&quot;form-inputs&quot;&gt;
                      &lt;label htmlFor=&quot;username&quot; className='form-label'&gt;&lt;/label&gt;
                      &lt;input
                          type=&quot;text&quot;
                          name=&quot;username&quot;
                          className='form-input'
                          placeholder=&quot;Username&quot;
                          value={values.username}
                          onChange={handleChange}
                      /&gt;
  
  
                      {errors.username &amp;&amp; &lt;p&gt;{errors.username}&lt;/p&gt;}
                  &lt;/div&gt;
  
  
                  &lt;div className=&quot;form-inputs&quot;&gt;
                      &lt;label htmlFor=&quot;password&quot; className='form-label'&gt; &lt;/label&gt;
                      &lt;input
                          type=&quot;text&quot;
                          name=&quot;password&quot;
                          className='form-input'
                          placeholder=&quot;Password&quot;
                          value={values.password}
                          onChange={handleChange}
                      /&gt;
  
                      {errors.password &amp;&amp; &lt;p&gt;{errors.password}&lt;/p&gt;}
                  &lt;/div&gt;
                  &lt;button className=&quot;form-input-btn&quot; type='submit'&gt;Sign Up&lt;/button&gt;
                  &lt;span className=&quot;form-input-login&quot;&gt; Already have an account?  &lt;a href=&quot;/log-in&quot;&gt;Login&lt;/a&gt; &lt;/span&gt;
  
  
              &lt;/form&gt;
  
  
          &lt;/div&gt;
  
      );
  };
  
  export default SignUpUser;
  
  
  
  </code></pre>
  <p>My SignUpFormUser.js file</p>
  <pre><code>import React, { useState } from 'react';
  import SignUpUser from './SignUpUser';
  import SignUpFormSuccess from './SignUpFormSuccess';
  import { Link } from 'react-router-dom';
  
  
  const SignUpForm = () =&gt; {
      const [isSubmitted, setIsSubmitted] = useState(false);
  
      function submitForm() {
          setIsSubmitted(true);
      }
      return (
          &lt;&gt;
              &lt;div className=&quot;grid-container top&quot;&gt;
  
                  &lt;div className=&quot;grid-item back&quot;&gt; 
                  &lt;Link to='/sign-up'&gt;
                          &lt;img src=&quot;/images/backOutline.svg&quot; alt=&quot;&quot; /&gt;
                      &lt;/Link&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;grid-item logo&quot;&gt;
  
                      &lt;Link to='/' className='logo'&gt;
                          &lt;img src=&quot;/images/yokifyLogoBlk.svg&quot; alt=&quot;&quot; /&gt;
                      &lt;/Link&gt;
  
                  &lt;/div&gt;
  
                  &lt;div className=&quot;grid-item cancel&quot;&gt;
  
                      &lt;Link to='/'&gt;
                          &lt;img src=&quot;/images/cancelOutline.svg&quot; alt=&quot;&quot; /&gt;
                      &lt;/Link&gt;
  
                  &lt;/div&gt;
                  &lt;/div&gt;
  
  
                  &lt;div className='form-container'&gt;
                      &lt;div className=&quot;form-content-left&quot;&gt;
                          &lt;img src=&quot;/images/handsUp.svg&quot; alt=&quot;people&quot; className=&quot;form-img&quot;/&gt;
                      &lt;/div&gt;
  
                      {!isSubmitted ? (
                          &lt;SignUpUser submitForm={submitForm} /&gt;
                      ) : (
                              &lt;SignUpFormSuccess /&gt;
                          )}
  
  
  
                  
                  &lt;/div&gt;
          &lt;/&gt;
      );
  };
  
  export default SignUpForm;
  
  
    [1] https://i.stack.imgur.com/2nsgR.png
  </code></pre>