React - Cannot read property 'length' of undefined

Hi guys!

So I’ve got a Contact form component with multiple Input components. When I run the app and type anything into the FormInput components, I get the following error…
TypeError: Cannot read property ‘length’ of undefined.

I cannot see why this would be undefined?
Any helps appreciated :slight_smile:

The ContactForm component…

import React, {useState} from 'react';
import emailjs from 'emailjs-com';

import FormInput from '../form-input/form-input.component';
import CustomButton from '../custom-button/custom-button.component';



import {
FormContainer,
FormTitle} from './contact-form.styles';

const ContactForm = () => {
    const [formData, setFormData] = useState({
        email: '',
        subject:'',
        message: ''
    });
    const { email, subject, message } = formData;

//an EmailJs function to send form data to email address
    const templateParams = { email, subject, message }
    const sendEmail = (event) => {
        event.preventDefault();
    
        emailjs.sendForm(
            'service_x6zcmkg',
            'template_lp7w38n',
            templateParams,
            'user_CeUFgLS0y9mViIM0qPkKp')
          .then((result) => {
              console.log(result.text);
          }, (error) => {
              console.log(error.text);
          });
      }
    
    const handleChange = (event) => {
        const { value, name } = event.target;

        setFormData({ [name]: value })
    }

    
    return (
        <FormContainer>
            <FormTitle>Get In Touch!</FormTitle>
            <span>We'll get back to you as soon as possible</span>
                <form onSubmit={sendEmail}>
                <FormInput
                    name='email'
                    type='email'
                    handleChange={handleChange}
                    value={email}
                    label='email'
                    required
                />
                <FormInput
                    name='subject'
                    type='text'
                    handleChange={handleChange}
                    value={subject}
                    label='subject'
                    required
                />
                <FormInput
                    name='message'
                    type='text'
                    handleChange={handleChange}
                    value={message}
                    label='message'
                    required
                />
                <CustomButton type='submit'>SUBMIT</CustomButton>
            </form>
        </FormContainer>
    )
}

export default ContactForm;

And the FormInput component…

import React from 'react';

import {
  GroupContainer,
  FormInputContainer,
  FormInputLabel
} from './form-input.styles';

const FormInput = ({ handleChange, label, ...props }) => (
  <GroupContainer>
    <FormInputContainer onChange={handleChange} {...props} />
    {label ? (
      <FormInputLabel className={props.value.length ? 'shrink' : ''}>
        {label}
      </FormInputLabel>
    ) : null}
  </GroupContainer>
);

export default FormInput;

Nevermind! I forgot to spread in the other formData :man_facepalming:

setFormData({ ...formData, [name]: value })

Will leave this here in case it’s in any way useful to anyone else for any reason at all :sweat_smile: