For the life of me, I can't figure out why this code refuses to run the handleSubmit function. Essentially, the form is supposed to take an input and execute the handleSubmit function upon submission. This function then makes a POST request to an API route with the email and userId. However, instead of logging these values to the console, I keep receiving a warning that says
Form submission canceled because the form is not connectedimport { Fragment, useState } from 'react';
import { Dialog, Transition } from '@headlessui/react';
import Image from 'next/image';
export default function Team({ show, setShow, userId }) {
const [email, setEmail] = useState({ userId: userId, email: "" });
const [emailMessage, setEmailMessage] = useState("...");
const [emailSent, setEmailSent] = useState(false);
const handleChange = (e) => {
e.preventDefault();
const { name, value } = e.target;
setEmail({ ...email, [name]: value });
};
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await fetch("/api/team-members", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ userId: email.userId, email: email.email })
});
const data = await response.json();
console.log(email.userId, email.email) //This is not logging to the console
console.log("DATA", data); //This is not logging to the console
} catch (error) {
console.error("Error fetching data:", error);
setEmailMessage("An error occurred while sending the invite.");
}
};
return (
<>
<div >
{emailSent ? (
<>
<button
type="button"
onClick={() => setShow(false)}
>
Close
</button>
</>
) : (
<form onSubmit={handleSubmit}>
<label htmlFor="email">
Member's email
</label>
<p>Please enter one or more emails separated by commas ','</p>
<input
id="email"
name="email"
type="email"
onChange={handleChange}
autoComplete="email"
value={email.email}
required
placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20454d41494c604558414d504c450e434f4d">[email protected]</a>"
/>
<button type="submit" onClick={() => setEmailSent(true)}>
Submit
</button>
</form>
)}
</div>
</>
)
}