Can't figure out what I did wrong on Animal Fun Facts JSX/React exercise

Web Development Full-Stack
1

Hello everyone. I just tried to complete this exercise and for whatever reason, I was not able to get the text to show up for the fun facts. I see the images, background, and “click an animal for a fun fact.” but when I click on an animal, their “fun fact” does not show up. Any ideas as to why this could be? Here is my code (and thank you in advance):

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 = e.target.alt
    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);
2 
// 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);
1 Like
3

Hey thank you man! I knew it must have been some minor spelling mistake. I appreciate you.

1 Like