Animal Fun Facts - Step 13 Not Working

Hi,

I’m in the process of completing ‘Animal Fun Facts’ for the JSX React Module. I’ve reached step 13 but the fact will not display upon clicking the images and cannot figure out what is wrong with my code. Any help would be much appreciated! See code below. Thank you!

// Importing modules:
import { animals } from ‘./animals’;
import React from ‘react’;
import {createRoot} from ‘react-dom/client’;

// Setting up root:
const container = document.getElementById(‘app’);
const root = createRoot(container);

// Setting up background:
const background = ocean;

// Event handler function:
const displayFact = (e) => {
const clickedImg = e.target.alt;
const optionIndex = Math.floor(Math.random() * clickedImg.facts.length);
const funFact = clickedImg.facts[optionIndex];
document.getElementById(‘fact’).innerHTML = funFact;
};

// Preparing animal images:
const images = ;
for (const animal in animals) {
images.push(
{animal})
};

// Title:
const title = ‘’;

// Page content:
const animalFacts = (

{title === '' ? 'Click an animal for a fun fact!' : title}

{background}
{images}

);

// Rendering content:
root.render(animalFacts);

// Importing modules:
import { animals } from './animals';
import React from 'react';
import { createRoot } from 'react-dom/client';

// Setting up root:
const container = document.getElementById('app');
const root = createRoot(container);

// Event handler function:
const displayFact = (e) => {
    const animalName = e.target.alt;
    // Correctly accesses the relevant animal in the animals object using the animalName string
    const animal = animals[animalName];
    // Generates a random index based on the number of facts of the animal
    const optionIndex = Math.floor(Math.random() * animal.facts.length);
    // Selects a random fact of the animal
    const funFact = animal.facts[optionIndex];
    // Updates the 'fact' element with the selected fact
    document.getElementById('fact').innerHTML = funFact;
};

// Preparing animal images:
const images = []; // Properly initializes the images array
for (const animalName in animals) {
    const animal = animals[animalName];
    // Creates an <img> element for each animal with necessary attributes
    images.push(
        <img 
            key={animalName} // Uses animalName as a unique key for each element
            src={animal.image} // Sets the image source
            alt={animalName} // Sets the alt text to the animal's name
            onClick={displayFact} // Sets an onclick handler to display facts
        />
    );
};

// Page content:
const animalFacts = (
    <div>
        <h1>{title === '' ? 'Click an animal for a fun fact!' : title}</h1>
        {/* background here */}
        <div>{images}</div>
    </div>
);

// Rendering content:
root.render(animalFacts);
1 Like

Thanks for the code! Looks like I missed a step when constructing the event handler… I didn’t use the alt of the clicked image to access the animal object within the animals object and was trying to access the ‘facts’ property from the alt text of the image rather than the animal object.

Thanks again :+1: