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
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;