Question about calling functions inside JSX (8. Event Listeners in JSX)


#1


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


I don't understand how the makeDoggy function can operate correctly when i don't even pass it the required parameter (Inside the image in the kitty variable). I thought that it needed that parameter to select the image that should be modified, but how can the function be executed without knowing that parameter? Or does this parameter get passed on automatically because it is the name of the variable i use to call the function? The following code works perfectly and it doesn't generate any error messages, but i don't understand why it works.


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

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


#2

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