Passing an onClick function from parent to child, automatically calls it on page render

I passed this function to a child component of mine:

const mopen_editquestion = (question) =>  {
    setMShowEditQuestion(true)
    console.log(question)
}

through this:

<QuestionT click={mopen_editquestion} question={question} />

And in my child component, I call it here:

<img className="hover-hand" onClick={props.click(props.question)} src={edit_icon} alt="settings" width="30vh"/>

When the page renders, the modal (called from setMShowEditQuestion(true)) is already opened, and the console log is already flooded from the console.log(question) even if I haven’t clicked anything on it yet. It seems its calling the function on render?

Any advices for this? Thanks a lot!

Answer

try changing to onClick={()=>props.click(props.question)}

what is happening now is that you already executed that function, instead of tossing it into the onClick attribute.

Check this post (React onClick function fires on render) for more information.