Why does onClick use makeDoggy and not makeDoggy()?

#1 
import React from 'react';
import ReactDOM from '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');
}

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

The onClick attribute of const kitty is set to the function makeDoggy. To do this, you have to indicate you are using Javascript hence the {} brackets. However, the correct answer doesn’t using the standard function call: makeDoggy() and instead uses makeDoggy.

Also, the makedoggy function has an e parameter. When does that parameter get passed and how can a call to makeDoggy be made with a nonexsistent parameter when the function requires one?

#2

its explained here in the docs:

its simply part of reactJS syntax.

no, because e is the event, which is click, so reactJS/javascript handles this as well for you. How nice of react

if you need to pass additional information to the event, its also explained in the docs i linked above

#3

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