FAQ: Advanced JSX - Event Listeners in JSX

This community-built FAQ covers the “Event Listeners in JSX” exercise from the lesson “Advanced JSX”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn ReactJS: Part I

FAQs on the exercise Event Listeners in JSX

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Why are we not calling the function with braces.
it is {functionName} but not {functionName()}. Why?

Because that will call functionName() when the element is initiated and set the handler to whatever the function returns.

So if you make a function like this.

function functionName(){
  return function(){

That would work, but otherwise you just need to reference the function with functionName not actually call it on runtime with functionName() (unless you have a function within a function like above).

The image doesn’t seem to be changing to a puppy - even after I clicked run solution (see attached).

Aside from the fact that the provided solution doesn’t seem to be working (even after I ran the CA provided solution), I also have a follow up question:

  1. The question “Why don’t we set the event listener attribute value to a function call?” explains that we simply reference the function makeDoggy to avoid calling it on runtime, which makes sense.

But, since function makeDoggy(e) takes e as a parameter, what specifically is being passed to e when we reference the function makeDoggy by using <img src… onClick={makeDoggy}, without passing an argument?