Animal Fun Facts - Step 13: On click event handler


I’m working on the Animal Fun Facts project (React, Part 1 > JSX) and can’t seem to get the event handler to work in Step 13.

Can you help me spot what I’m doing wrong?


import { animals } from './animals'; import React from 'react'; import { createRoot } from 'react-dom/client'; const container = document.getElementById('app'); const root = createRoot(container); const title = ''; const background = <img className='background' alt='ocean' src='/images/ocean.jpg'/> function displayFact(e) { const animal =; const index = Math.floor(Math.random() * animals[animal].facts.length; const funFact = animals[animal].facts[index]; const p = document.getElementById('fact'); p.innerHTML = funFact; }; const images = []; for (const animal in animals) { const image = ( <img onClick={displayFact} key={animal} className='animal' alt={animal} src={animals[animal].image} aria-label={animal} role='button' /> ); images.push(image); } const animalFacts = ( <div> <h1>{title === '' ? 'Click an animal for a fun fact' : title}</h1> {background} <p id='fact'></p> <div className='animals'>{images}</div> </div> ); root.render(animalFacts);

You are missing a closing parenthesis.

// You wrote:
const index = Math.floor(Math.random() * animals[animal].facts.length;

// It should be:
const index = Math.floor(Math.random() * animals[animal].facts.length);

If you look at your Codebyte, there is a red mark in the scroll bar. That is an indication that there is likely a syntax issue on that particular line of code.