Calling a javascript function in JSX: why does calling a function without the () work?

Question

Currently on Codecademy and learning about React.

Came to this code:

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 uses makeDoggy instead of using the standard function call: 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?

Answer 1

Without parenthesis, you're not calling the function. The name of the function without the parenthesis is a reference to the function. Parentheses is not used in the function at that point because we are not calling the function at the point where the code is encountered, but instead want to pass a reference to the function. If you use makeDoggy() , the function will get called at that point, we instead want it to be called only after onClick, so we pass a reference to makeDoggy there.

Alternatively you can do onClick={(e)=>makeDoggy(e)}

e gets bound automatically using something called property initializer in es6.

If you want to pass parameters, you've to do something like onClick={(e)=>makeDoggy(e, "hello")}. This will pass "hello" as a second parameter to the function makeDoggy