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 bee a picture of a doggy.
  e.target.setAttribute('src', '.jpeg');
  e.target.setAttribute('alt', 'doggy');
}

const kitty = (
  <img 
    src=".jpg" 
    alt="kitty" 
    onClick={makeDoggy}
  />
  	
);

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

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

const kitty = (
  <img 
    src="https://s3.amazonaws./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?

• javascript
• reactjs
• react-native
• jsx

• It works only without (), React is very different from plain html. – Hitmands Commented Jan 15, 2018 at 8:20

2 Answers 2

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

No need for too much stress the solution is just double quote elimination "", in ReactJs to call a function inside an element you just have to do the following

onClick={functionName}

React can process function in curly braces.