How can I add the Suspense tags to the following code :-
"use client";
import { Suspense, useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Suspense } from 'react'
import Form from "@components/Form";
const UpdatePrompt = () => {
const router = useRouter();
const searchParams = useSearchParams();
const promptId = searchParams.get("id");
const [post, setPost] = useState({ prompt: "", tag: "", });
const [submitting, setIsSubmitting] = useState(false);
useEffect(() => {
const getPromptDetails = async () => {
const response = await fetch(`/api/prompt/${promptId}`);
const data = await response.json();
setPost({
prompt: data.prompt,
tag: data.tag,
});
};
if (promptId) getPromptDetails();
}, [promptId]);
const updatePrompt = async (e) => {
e.preventDefault();
setIsSubmitting(true);
if (!promptId) return alert("Missing PromptId!");
try {
const response = await fetch(`/api/prompt/${promptId}`, {
method: "PATCH",
body: JSON.stringify({
prompt: post.prompt,
tag: post.tag,
}),
});
if (response.ok) {
router.push("/");
}
} catch (error) {
console.log(error);
} finally {
setIsSubmitting(false);
}
};
return (
<Suspense>
<Form
type='Edit'
post={post}
setPost={setPost}
submitting={submitting}
handleSubmit={updatePrompt}
/>
</Suspense>
);
};
export default UpdatePrompt;
I tried adding it in the return statement but during deployment in Vercel this error showed :-
Error:
x Unexpected token. Did you mean {'}'}
or }
?
,-[/vercel/path0/app/update-prompt/page.jsx:63:1]
Can someone help me in adding the Suspense tags in the above code. Thanks in Advance!