React Typescript and useCallback

Question

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?

Shubham Khatri · Accepted Answer · 2020-05-28 09:24:21Z

7

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])

answered May 28, 2020 at 9:24

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shubham Khatri Over a year ago

Happy to have helped :-)

Collectives™ on Stack Overflow

React Typescript and useCallback

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related