Referring to the Slate.js mention example, https://github.com/ianstormtaylor/slate/blob/main/site/examples/mentions.tsx I want to integrate it with my React app.While integration facing issue with hooks used in the code..
QueryComponent.js
const QueryBoxComponent = () => {
const ref = useRef<HTMLDivElement | null>()
const [target, setTarget] = useState<Range | undefined>()
const [index, setIndex] = useState(0)
const [search, setSearch] = useState('')
const renderElement = useCallback(props => <Element {...props} />, [])
const editor = useMemo(
() => withMentions(withReact(withHistory(createEditor()))),
[]
)
const chars = CHARACTERS.filter((c) =>
c.toString().toLowerCase().startsWith(search.toLowerCase())
).slice(0, 10);
I am calling it as a functional component:
<div className="stockfilterresult" style={{ marginTop: "10px" }}>
<QueryBoxComponent />
</div>
const ref = useRef<HTMLDivElement | null>(); ^
35 | const [target, setTarget] = useState<Range | undefined>();
36 | const [index, setIndex] = useState(0);
37 | const [search, setSearch] = useState('');
BabelLoaderError: SyntaxError:
C:/Users/HP/Downloads/StockUI/src/components/QueryBoxComponent.jsx: Unexpected token (34:44)
34 | const ref = useRef<HTMLDivElement | null>();
It uses Typescript and your error looks like you don't have TypeScript installed.