Argument of type 'MouseEvent<HTMLParagraphElement, MouseEvent>' is not assignable to parameter of type 'number'

Question

I have a map function in which i want to implement a feature where if i click on any particular tag(map element) it should trigger a function.

<input type="text" id="search" value={input} onChange={(e) => setInput(e.target.value)}/>
            <div id="suggestions">
                {tags.filter(tag => {
                    if(input === ""){
                        return;
                    }
                    else if(tag.label.toLowerCase().includes(input.toLowerCase())){
                        return tag
                    }
                }).map(tag => <p onClick={tag => addTag(tag.id)}>{tag.label}</p>) }

here if i hover over the tag argument inside addTag i get this error

Argument of type 'MouseEvent<HTMLParagraphElement, MouseEvent>' is not assignable to parameter of type 'number'.

Above this i have the function

const addTag = (id: number)=> {
        console.log(id)
    }   

Also this is the state i have

const [tags, setTags] = useState([{id: 1, label: "random"}, {id: 2, label: "important"}])
const [input, setInput] = useState("")

How do i get rid of that error?

Answer 1

You need to pass tag.id to addTag:

onClick={()=> addTag(tag.id)}