Next.js Discord

Discord Forum

Passing ref as a prop

Scarlet Ibis posted this in #help-forum
Open in Discord
Scarlet IbisOP
When I hover on ref={} I get:
Type 'RefObject<HTMLInputElement | null>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'.
  Type 'RefObject<HTMLInputElement | null>' is not assignable to type 'RefObject<HTMLInputElement>'.
    Type 'HTMLInputElement | null' is not assignable to type 'HTMLInputElement'.
      Type 'null' is not assignable to type 'HTMLInputElement'.ts(2322)

This is the component.
const NewTaskForm = ({ submitNewTaskHandler, newWishlistInputRef }: INewTaskForm) => {
    return (
        <form onSubmit={submitNewTaskHandler} className="flex justify-center items-center p-4 m-auto gap-2 bg-violet-400 rounded">
                className="min-w-80 px-3 py-2"
                placeholder="Enter your next wish..." />
            <button className="text-xl shadow-md bg-blue-600 text-white hover:bg-blue-500 rounded-md px-3 py-1.5">Add</button>

The interface:
export interface INewTaskForm {
    submitNewTaskHandler: (event: FormEvent) => void;
    newWishlistInputRef: React.RefObject<HTMLInputElement | null>;

How do I fix that?

0 Replies