1.8 Event Listenters - Stuck at step 2


#1


https://www.codecademy.com/courses/react-101/lessons/react-jsx-advanced/exercises/jsx-event-listeners?action=lesson_resume


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 <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
		onClick={makeDoggy}
		src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg" 
		alt="kitty" />
);

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


#2

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'));

#3

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


#4

do you need help with a question


#5

I think @jpostdesign already solved his problem.


#6

ok thx for your help


#7

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