# Nextjs Course/Issue tracker React hook form Problem

**URL:** <https://forum.codewithmosh.com/t/nextjs-course-issue-tracker-react-hook-form-problem/23547>\
**Category:** Uncategorized\
**Created:** [November 10, 2023, 7:36am UTC](https://forum.codewithmosh.com/t/nextjs-course-issue-tracker-react-hook-form-problem/23547 "2023-11-10T07:36:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![esther\_wk](https://avatars.discourse-cdn.com/v4/letter/e/ee7513/32.png) [@esther\_wk](https://forum.codewithmosh.com/u/esther_wk)\
**Post date:** [November 10, 2023, 7:36am UTC](https://forum.codewithmosh.com/t/nextjs-course-issue-tracker-react-hook-form-problem/23547/1 "2023-11-10T07:36:56Z")

</div>

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

```auto
 <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](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/4/404ceb5fa794ceac05dd4ceed968b078a878b061.png)

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

---

<div class="post-metadata">

**Author:** ![Ceci](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/ceci/32/433_2.png) [@Ceci](https://forum.codewithmosh.com/u/Ceci)\
**Post date:** [November 17, 2023, 5:23pm UTC](https://forum.codewithmosh.com/t/nextjs-course-issue-tracker-react-hook-form-problem/23547/2 "2023-11-17T17:23:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bnazeem](https://avatars.discourse-cdn.com/v4/letter/b/bc8723/32.png) [@bnazeem](https://forum.codewithmosh.com/u/bnazeem)\
**Post date:** [December 12, 2023, 1:56am UTC](https://forum.codewithmosh.com/t/nextjs-course-issue-tracker-react-hook-form-problem/23547/3 "2023-12-12T01:56:23Z")

</div>

Hi Ceci,

Do you mean like that:

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

---

<div class="post-metadata">

**Author:** ![cort-0](https://avatars.discourse-cdn.com/v4/letter/c/e19adc/32.png) [@cort-0](https://forum.codewithmosh.com/u/cort-0)\
**Post date:** [January 24, 2024, 9:26am UTC](https://forum.codewithmosh.com/t/nextjs-course-issue-tracker-react-hook-form-problem/23547/4 "2024-01-24T09:26:19Z")

</div>

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