Typescript Type Definition has handleAddition, handleDelete, ... events while the component has onAddition, onDelete events
marcsalesgrid opened this issue · 2 comments
Expected behaviour
When I use the component I should not get a Typescript error when I specify the onAddition and onDelete property:
Current behaviour
TypesScript complains the there is no onAddition and onDelete prop
TS2769: No overload matches this call. Overload 1 of 2, '(props: ReactTagsProps | Readonly<ReactTagsProps>): ReactTags', gave the following error. Type '{ className: string; tags: Tag[]; suggestions: { id: number; name: string; }[]; onAddition: (newTag: any) => void; onDelete: (tagIndex: any) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactTags> & Readonly<ReactTagsProps> & Readonly<...>'. Property 'onAddition' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactTags> & Readonly<ReactTagsProps> & Readonly<...>'. Overload 2 of 2, '(props: ReactTagsProps, context: any): ReactTags', gave the following error. Type '{ className: string; tags: Tag[]; suggestions: { id: number; name: string; }[]; onAddition: (newTag: any) => void; onDelete: (tagIndex: any) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactTags> & Readonly<ReactTagsProps> & Readonly<...>'. Property 'onAddition' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactTags> & Readonly<ReactTagsProps> & Readonly<...>'.
Steps to Reproduce
Steps to reproduce the problem:
- Create TypeScript tsx component.
- Follow example code and add ReactTags to output
- Try to specify onAddition or onDelete prop.
import debug from "debug";
import _, {get} from "lodash";
import {StateContextAjaxRequestCache} from "StateContextAjaxRequestCache";
import {StateContextApplication} from "StateContextApplication";
import React, {useEffect, useState, useContext, useRef, useCallback} from "react";
import ReactTags, {Tag} from "react-tag-autocomplete";
const log = debug("app:component:components.content.TagInput");
interface ITagInputProps {
className: string;
}
const TagInput = (props: ITagInputProps) => {
const {getAjaxRequestCache, setAjaxRequestCache} = useContext(StateContextAjaxRequestCache);
const {getApplicationState, setApplicationState} = useContext(StateContextApplication);
const [tags, setTags] = useState<Tag[]>([]);
// const [tags, setTags] = useState([]);
const [suggestions, setSuggestions] = useState([
{id: 1, name: "Training"},
{id: 2, name: "Battle Cards"},
{id: 3, name: "Case Studies"},
{id: 4, name: "Contracting"},
{id: 5, name: "Test_1"},
{id: 6, name: "Test_2"},
]);
// const reactTags = useRef < ReactTags > null;
const handleDelete = useCallback(
(tagIndex) => {
setTags(tags.filter((_, i) => i !== tagIndex));
},
[tags]
);
const handleAddition = useCallback(
(newTag) => {
setTags([...tags, newTag]);
},
[tags]
);
return (
<ReactTags
tags={tags}
suggestions={suggestions}
onAddition={handleAddition}
onDelete={handleDelete}
{...props}
/>
);
};
export default TagInput;
Example and screenshots
Please add a link to a minimal reproducible example of the bug if you have created one.
Screenshots
Your environment
- OS: MacOs Catalina 10.16.7
- Browser: X
- Version of the component: 6.3.0
- React version: 17.0.2
I don't maintain the @types/react-tag-autocomplete
but the definitions there do look fairly up-to-date.
I'd recommend checking which type definition file the types you're seeing are being resolved from (e.g. cmd + click
on the prop in VSCode) and checking if this matches the latest published version
You were right: For some reason I had the types for version 5.12 already installed. This was fixed by running npm install --save @types/react-tag-autocomplete
to install the latest.
Thanks Matt!