[FIXED] How to pass the element that triggered an event into a function in React?

Issue

Inside my React function component, I have a code that looks like this:

src="https://i.stack.imgur.com/wwB1T.png" alt="enter image description here" />

How to pass the FontAwesomeIcon element as a parameter into markATaskAsDone? I tried to pass in 'this' but got an error that says

I also tried to cast this as a JSX.Element before passing it into markATaskAsDone but still get the same error.

Solution

There are two ways how this can be approached.

The first one is by handling events without parameter. The second one can be done with passing React Event Object.
<FontAwesomeIcon icon=(faCircleCheck} onClick={()=>{markATaskAsDone }} />
vs
<FontAwesomeIcon icon=(faCircleCheck} onClick={(event)=>{markATaskAsDone (event)}} />

Personally, I would just onClick function, where you would update some states depending on the state you may change rendered HTML.

const [isDone, setIsDone]
const markATaskAsDone = () => {
  setIsDone(!isDone)
}

return <FontAwesomeIcon icon=(isDone ? faCheck : faCircleCheck} onClick={()=>{markATaskAsDone ()}} />

Also, this may be simplified just by setting the state right from the onClick action.

EDIT #1
In case you need to pass the event do it this way...

const markATaskAsDone = (event) => {
  console.log(event)
}

return <FontAwesomeIcon icon=(isDone ? faCheck : faCircleCheck} onClick={(event)=>{markATaskAsDone (event)}} />

Answered By - Šimon Slabý
Answer Checked By - - Willingham (ReactFix Volunteer)