CODEWITHSUNDEEP
reactjstypescriptreact-hooksusecallback
Alfrex92
Alfrex92

Reputation: 6788

React Typescript and useCallback

I'm trying to use Typescript and useCallback, but I'm having this error

Expected 0 arguments, but got 1

This is my code 

const searchFriends = useCallback(() => (filterValue: string): void => {
    if (dataState.length <= INITIAL_FRIENDS_API_REQUEST) fetchAllFriends()
    const filterValueInsensitive = filterValue.toLowerCase()
    const filtered = dataState.filter((friend: Friends) => {
      return friend.displayName?.toLowerCase().includes(filterValueInsensitive)
    }) 
    setFriendsDisplayState(filtered)
  }, [dataState,fetchAllFriends]) 

  const handleChangeSearchInput = (
    e: React.ChangeEvent<HTMLInputElement>
  ): void => searchFriends(e.currentTarget.value) // ERROR here "Expected 0 arguments, but got 1"

Any idea how can I fix it?

Upvotes: 5

Views: 11964

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 282050

You are using useCallback syntax like useMemo's. It doesn't need a currying function. The correct way to write it is like

const searchFriends = useCallback((filterValue: string): void => {
    if (dataState.length <= INITIAL_FRIENDS_API_REQUEST) fetchAllFriends()
    const filterValueInsensitive = filterValue.toLowerCase()
    const filtered = dataState.filter((friend: Friends) => {
      return friend.displayName?.toLowerCase().includes(filterValueInsensitive)
    }) 
    setFriendsDisplayState(filtered)
  }, [dataState,fetchAllFriends])

Upvotes: 7

Related Questions