app-index.js:31 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of Controller.
'use client';
import { ErrorMessage, Spinner } from '@/app/components';
import { createIssueSchema } from '@/app/validationSchemas';
import { zodResolver } from '@hookform/resolvers/zod';
import { Issue } from '@prisma/client';
import { Button, Callout, TextField } from '@radix-ui/themes';
import axios from 'axios';
import 'easymde/dist/easymde.min.css';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
// import SimpleMDE from 'react-simplemde-editor';
import { z } from 'zod';
const SimpleMDE = dynamic(() => import('react-simplemde-editor'), {
ssr: false,
});
interface Props {
issue?: Issue;
}
type IssueFormData = z.infer<typeof createIssueSchema>;
const IssueForm = ({ issue }: Props) => {
const [error, setError] = useState('');
const [isSubmitting, setSubmitting] = useState(false);
const router = useRouter();
const {
handleSubmit,
register,
control,
formState: { errors },
} = useForm<IssueFormData>({
resolver: zodResolver(createIssueSchema),
});
const onSubmit = handleSubmit(async (data) => {
try {
setSubmitting(true);
await axios.post('/api/issues', data);
router.push('/issues');
} catch (error) {
console.log(error);
setSubmitting(false);
setError('An unexpected error occurred.');
} finally {
setSubmitting(false);
}
});
return (
<div className="max-w-2xl ">
{error && (
<Callout.Root color="red" className="mb-5">
<Callout.Text>{error}</Callout.Text>
</Callout.Root>
)}
<form onSubmit={onSubmit} className="space-y-3">
{/* Title */}
<TextField.Root>
<TextField.Input
defaultValue={issue?.title}
placeholder="Title"
{...register('title')}
/>
</TextField.Root>
<ErrorMessage>{errors.title?.message}</ErrorMessage>
<Controller
name="description"
control={control}
defaultValue={issue?.description}
render={({ field }) => (
<SimpleMDE placeholder="Description" {...field} />
)}
/>
<ErrorMessage>{errors.description?.message}</ErrorMessage>
<Button disabled={isSubmitting}>
Submit New Issue {isSubmitting && <Spinner />}
</Button>
</form>
</div>
);
};
export default IssueForm;
