How to pass the element that triggered an event into a function in React?-CodePudding

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

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.

CodePudding user response：

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)}} />

CodePudding user response：

You can pass the event like this

<FontAwesomeIcon icon={faCircleCheck} onClick={(e) => markTaskAsDone(e)} />

const markTaskAsDone = (e) => {
    e.preventDefault();   
};