1.8 Event Listenters - Stuck at step 2

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/courses/react-101/lessons/react-jsx-advanced/exercises/jsx-event-listeners?action=lesson_resume

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
I’m stuck at step 2, for adding the onClick attribute. In the preview, it works, but when I click RUN I get an error message:

“The should have an attribute of onClick={makeDoggy}.”

Is it sensitive where the attribute is placed inside the <img> tag, or something else I’m missing?

I’m on Firefox 53 and OSX 10.12.5

```

var React = require(‘react’);
var ReactDOM = require(‘react-dom’);

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

var kitty = (

);

ReactDOM.render(kitty, document.getElementById(‘app’));

<do not remove the three backticks above>

UPDATE

After several attempts more, was able to get the “Stuck?” modal popup, and used “Get the Code”. Below is the difference.

It seems key to place the onClick at the end of the <img> tag. Is this required generally in JSX or best practices?

“Get the Code” final copy and pasted below

var ReactDOM = require('react-dom');

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://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg');
  e.target.setAttribute('alt', 'doggy');
}

var kitty = (
	<img 
		src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg" 
		alt="kitty" 
    onClick={makeDoggy} />
);

ReactDOM.render(kitty, document.getElementById('app'));

UPDATE 2

I believe I found the error. The checker is VERY sensitive about having a space after the <img> tag vs a return line.

For example, the original code below will not work:

var kitty = (
	<img
		onClick={makeDoggy}
		src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg" 
		alt="kitty" />
);

But adding a space after the <img> tag before the line return marks step 2 as completed

var kitty = (
	<img 
		onClick={makeDoggy}
		src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg" 
		alt="kitty" />
);

You can see the added space if you click-drag to highlight the added space after the <img> tag but before the line return for onClick

2 Likes

do you need help with a question

I think @jpostdesign already solved his problem.

ok thx for your help

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.