Nextjs Course/Issue tracker React hook form Problem

1

I got a warning problem in the create New Issue page,

 <div className="max-w-lg">
      {error && (
        <Callout.Root color="red" className="mb-3">
          <Callout.Text>{error}</Callout.Text>
        </Callout.Root>
      )}
      <form className="space-y-3" onSubmit={handleSubmit(sendData)}>
        <TextField.Root>
          <TextField.Input placeholder="Title" {...register("title")} />
        </TextField.Root>
        {errors.title && (
          <Text color="red" as="p">
            {errors.title.message}
          </Text>
        )}
        <Controller
          name="description"
          control={control}
          render={({ field }) => (
            <SimpleMDE placeholder="Description" {...field} />
          )}
        />
        {errors.description && (
          <Text color="red" as="p">
            {errors.description.message}
          </Text>
        )}
        <Button type="submit">Submit New Issue</Button>
      </form>
    </div>

image
image2630×566 219 KB

seems like the problem is with the component, a ref problem, has anyone encountered this problem and can help me to fix it?

2

you can ad ref={null} to your Controller to erase that warning

3

Hi Ceci,

Do you mean like that:

<Controller
name=“description”
control={control}
ref={null}
render={({ field }) => (
<SimpleMDE placeholder=“Description” {…field} />
)}
/>
This gives an error.

4

I put the ref={null} on the SimpleMDE component and the warning stops