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?

1 Like

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(){
         alert('hello');
   }
}

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).

3 Likes

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?

Thanks!

3 Likes

I don’t understand this also.

So here’s my current understanding of what happens here:

When the user clicks the img element, the event listener onClick calls the associated event handler function makeDoggy.

When the event listener calls the event handler, it also passes a single argument - an event object that contains properties describing the event that occurred.

In our event handler function makeDoggy(e), the parameter e receives the event object (e is just a naming convention for receiving an event object argument for event-triggered functions).

Then within our event handler function, e.target references the DOM Element to which the event occurred, and setAttribute() is a method that we can use to change the DOM element’s attributes. It takes 2 arguments - the name of an attribute whose value is to be set, and the value of that attribute to be set.

Basically, the tl;dr as I understand it is that when an event listener is triggered, it calls the event handler function and also passes an event object to it.

2 Likes

Ahh the cat is reading “You don’t know JS”. He’s understands what’s important in life haha!

2 Likes

But read carefully what You add to Your code! You **have to click by mouse on the picture of the cat. And then You change ( by clicking the picture on doggy) the picture. :slight_smile:

I’m trying to make it so that clicking on the doggy picture it reverts back to the kitty picture. Can some one advise me.
I’ve tried inputing the doggy function’s onClick={makeKitty} , onClick='{makeKitty}', and even onClick='makeKitty.

import React from 'react';
import { createRoot } from 'react-dom/client';

const container = document.getElementById('app');
const root = createRoot(container);
function makeDoggy(e) {
  // Call this extremely useful function on an <img>.
  // The <img> will become a picture of a doggy.
  e.target.setAttribute('src', 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg');
  e.target.setAttribute('alt', 'doggy');
  e.target.setAttribute('onClick', {'makeKitty'});
}

function makeKitty(e) {
  e.target.setAttribute('src', 'https://content.codecademy.com/courses/React/react_photo-kitty.jpg');
  e.target.setAttribute('alt', 'kitty');
  e.target.setAttribute('onClick', {'makeDoggy'});
}
const kitty = (
	<img 
		src="https://content.codecademy.com/courses/React/react_photo-kitty.jpg" 
		alt="kitty"
    onClick={makeDoggy} />
);

root.render(kitty);

Hi, mccormicka, think easily, wish you a lot of patience :slight_smile: make it easy, shorter, like this:
Copy only code, I mean text, picture of that cat jumps from source code :slight_smile:

import React from ‘react’;
import { createRoot } from ‘react-dom/client’;

const container = document.getElementById(‘app’);
const root = createRoot(container);
function makeDoggy(e) {
// Call this extremely useful function on an .
// The will become a picture of a doggy.
e.target.setAttribute(‘src’, ‘https://content.codecademy.com/courses/React/react_photo-puppy.jpeg’);
e.target.setAttribute(‘alt’, ‘doggy’);
}

const kitty = (


);

root.render(kitty);

For those who do not agree to simply replace the kitty with a puppy: this function will return the kitty when pressed again!

 if(e.target.getAttribute('src') !== "https://content.codecademy.com/courses/React/react_photo-puppy.jpeg"){
    e.target.setAttribute('src',"https://content.codecademy.com/courses/React/react_photo-puppy.jpeg");
    e.target.setAttribute('alt', 'doggy');
  }else{
    e.target.setAttribute('src', "https://content.codecademy.com/courses/React/react_photo-kitty.jpg");
    e.target.setAttribute('alt', "kitty");
  }