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:
<img onClick={myFunc} />
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'); } <img onClick={myFunc} />
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
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')
.
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.