score:6

Accepted answer

the correct way is this. you need to use arrow function or else react will understand that you want to execute the function at load

wrong

<div classname="drt_clearfix drt_cartableitem" key={index} onclick={(props.calldetails)(item.id)}>

correct

<div classname="drt_clearfix drt_cartableitem" key={index} onclick={() => props.calldetails(item.id)}>

score:1

it seems you exec your callback function immediately as it renders based on your code:

onclick={(props.calldetails)(item.id)}

it's supposed to be:

onclick={() => props.calldetails(item.id)}

is that the issue?

score:1

it's mainly because of piece of code onclick={(props.calldetails)(item.id)} in your child component. this code is actually executing calldetails function and passing the item.id value immediately. one way to handle this is to wrap your function.

onclick={() => {props.calldetails(item.id)}}

a simple reason as to why onclick is not called when it is wrapped is because it is not directly passing in any value when initialised.

score:2

change from

onclick={() => {setmode('rejected');}}

to

onclick={() => setmode('rejected')}

also

<div classname="drt_clearfix drt_cartableitem" key={index} onclick={() => props.calldetails(item.id)}>

but where did you define the const [mode, setmode] state


Related Query

More Query from same tag