Fix Animal Fun Facts Code

Web Development Full-Stack
1

I think the code is correct, but not showing popup text when image clicked, please help to fix.

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 bacground = <img src='/images/ocean.jpg' className = 'background' alt = 'ocean'/>;

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 factPopUp = document.getElementById('fact');
  factPopUp.innerHTML = funFact;
}

const images = [];
for (const animal in animals) { 
  const image = (
    <img 
      key = {animal}
      className = 'animal'
      alt = {animal}
      src = {animals[animal].image}
      aria-label = {animal}
      role = 'button'
      onClick = {displayFact}
    />;
  );
   images.push(image);
};

const animalFacts = (
  <div>
    <h1>{title === '' ? 'Click an animal for a fun fact!' : title}</h1>
    {bacground}
    <p id='fact'></p>
    <div className='animals'>
      {images}
    </div>
  </div>
);



root.render(animalFacts);
2

In the image = ( ) ,
there should be no ; after the />

I think you can’t have a ; inside of the ( )

2 Likes
3

Hi. Thank you, works.

1 Like