Open 17dun opened 1 year ago
Bump - same
@17dun @zikphil this is the most helpful answer- https://github.com/floating-ui/react-popper/issues/415#issuecomment-821968179
Basically, add explicit typing to the state variables like so-
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null)
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
when I run the official example https://popper.js.org/react-popper/v2/
import React, { useState } from 'react'; import { usePopper } from 'react-popper';
const Example = () => { const [referenceElement, setReferenceElement] = useState(null); const [popperElement, setPopperElement] = useState(null); const [arrowElement, setArrowElement] = useState(null); const { styles, attributes } = usePopper(referenceElement, popperElement, { modifiers: [{ name: 'arrow', options: { element: arrowElement } }], });
return ( <>
); };
I got a ts error as below: `ERROR in src/components/UserSearch/test.tsx:18:12 TS2322: Type 'Dispatch<SetStateAction>' is not assignable to type 'LegacyRef | undefined'.
Type 'Dispatch<SetStateAction>' is not assignable to type '(instance: HTMLDivElement | null) => void'.
Types of parameters 'value' and 'instance' are incompatible.
Type 'HTMLDivElement | null' is not assignable to type 'SetStateAction'.
Type 'HTMLDivElement' is not assignable to type 'SetStateAction'.
Type 'HTMLDivElement' provides no match for the signature '(prevState: null): null'.
16 |
17 |
Who can tell me what to do? thx~