Event Listeners in JSX

JSX elements can have event listeners, just like HTML elements can. Programming in React means constantly working with event listeners.

You create an event listener by giving a JSX element a special attribute. Here’s an example:

An event listener attribute’s name should be something like onClick or onMouseOver: the word on, plus the type of event that you’re listening for. You can see a list of valid event names here.

An event listener attribute’s value should be a function. The above example would only work if myFunc were a valid function that had been defined elsewhere:

function myFunc() {

alert('Make myFunc the pFunc... omg that was horrible i am so sorry');

}

Note that in HTML, event listener names are written in all lowercase, such as onclick or onmouseover. In JSX, event listener names are written in camelCase, such as onClick or onMouseOver.

Instructions

1.Look at line 17. ReactDOM.render() is being passed two null arguments.

Render kitty by replacing the first null with kitty, and the second null with document.getElementById('app').

2.Add an onClick attribute to the <img /> element. Set onClick‘s value equal to the makeDoggy function.

Remember, since attributes are a part of JSX expressions, you will need to inject JavaScript in order to use makeDoggy.

Click Run, and then click on the browser image to change the kitty into a doggy.

app.js

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://content.codecademy.com/courses/React/react_photo-puppy.jpeg');

e.target.setAttribute('alt', 'doggy');

}

const kitty = (

<img

src="https://content.codecademy.com/courses/React/react_photo-kitty.jpg"

alt="kitty" />

);

ReactDOM.render(null, null);

Page updated

Report abuse