How to use with a dynamic form

[DanielHudson2]

I have a form using react, part of the form is a button the user can use to add another set of fields (for context it's a rsvp form where the person can rsvp for another person hence the additional set of fields) the additional fields have the same name with an index added to them

How can I set this up with emailjs? As it seems impractical to set up a template with loads of duplicate dynamic variables

[DanielHudson2]

I've managed to find what I think is a viable solution to this.

As i'm controlling state in my form I have an array of objects called "People" so in my handlesubmit function I can access this and pass it into EmailJS as a field that I can access as a dynamic variable.

const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();

	// Format the form data for submission
	const formattedData = people.map((person) => {
		return `First Name: ${person.firstName}
		Last Name: ${person.lastName}
		Attending: ${person.attending ? 'Yes' : 'No'}
		Duration: ${person.duration}
		Starter: ${person.starter}
		Main Course: ${person.mainCourse}
		Dessert: ${person.dessert}
	`;
	});

	const emailContent = formattedData.join('\n\n');

	// Send the email using EmailJS
	emailjs.send(
		'SERVICE_ID', 
		'TEMPLATE_ID', 
		{
			message: emailContent,
		},
		'PUBLIC_KEY')
		.then((response) => {
			console.log('Email sent successfully!', response);
			window.location.href = '/success'; // Redirect to a success page
		})
		.catch((error) => {
			console.error('Email sending failed:', error);
			// Handle error case
		}
	);
};