CODEWITHSUNDEEP
javascriptreactjs
Veno
Veno

Reputation: 445

passing events from parent to child react got undefined

Parent Class Component:

toggleFunction = (event, ...otherProps) => {
    console.log(event) // EVENT GOT UNDEFINED
    console.log(otherProps) // THIS IS DISPLAYING WHAT IS NEED!
}

<Child updateFunction={(event) => this.toggleFunction(event,"PROPS-1","PROPS-2")}>

Child Functional Component:

const Child = ({ updateFunction }) => {
   ... OTHER CODE HERE
   <div onClick={() => updateFunction()}>Toggle</div>
}

My Problem is when i create event inside parent callback and pass to child as a method and execute parent toggleFunction in Parent Class. ONLY THE EVENT GOT UNDEFINED, OTHER PROPS IS DISPLAYING CORRECTLY

I found a solution by creating event inside child component and accessing inside Parent component, but that doesn't work for me as expected! Can anyone explain at what am i failing.

Thanks in advance!

Upvotes: 0

Views: 216

Answers (1)

Daniel Geffen
Daniel Geffen

Reputation: 1862

You need to pass the event from onClick to updateFunction:

<div onClick={event => updateFunction(event)}>Toggle</div>

Or let onClick call it for you since the first parameter is the event:

<div onClick={updateFunction}>Toggle</div>

Upvotes: 1

Related Questions