0

I need to pass the function as a component argument. How can I do this? I have function "handlerFunction" that I want to pass to the child component SearchComponent.

ProfilePage.js

export const ProfilePage = () => {
  const [docID, setDocID] = useState(null)

  const handlerFunction = (id) => {
    setDocID(id)
  }

  return (
    <div className="ProfilePage">
        profile page {uid}
        <SearchComponent token={access} handler={handlerFunction}/>
    </div>
  )
}

SearchComponent.js

export const SearchComponent = (token, handler) => {
  return (
    <a onClick={() => handler(doc["id"])}>Button</a
  )
}

My code is not working cuz of "Uncaught TypeError: handler is not a function". Help me please)

Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
PR0J3CT
  • 33
  • 5
  • In `SearchComponent`, the `token` argument is the `props` containing the `token` and `handler` fields. Function components rarely have more than one argument coming in. You will need to destructure the first argument to access the props you want. – Mr. Polywhirl Feb 20 '23 at 19:30

1 Answers1

0

You need to destructure your props with curly braces on the child component declaration:

export const SearchComponent = ({ token, handler }) => {

}
Designly
  • 266
  • 1
  • 9