Typescript Type Definition has handleAddition, handleDelete, ... events while the component has onAddition, onDelete events

[marcsalesgrid]

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:

1. Create TypeScript tsx component.
2. Follow example code and add ReactTags to output
3. 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-like-robots]

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

[marcsalesgrid]

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!