Untitled

import { animals } from "./animals";
import React from "react";
import ReactDOM from "react-dom";

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

const displayFact(e) => {
  const clickedAnimal = e.target.alt;
  const clickedAnimalFact = clickedAnimal.facts[Math.floor(Math.random * clickedAnimal.facts.length)]
  document.getElementById('fact').innerHTML = clickedAnimalFact
}

const background = <img class="background" alt="ocean" src="/images/ocean.jpg" />
const title = "";
const animalFacts = (
  <div>
    <h1>{title === "" ? "Click an animal for a fun fact" : title}</h1>;
    <div>{background}</div>
    <div className='animals'>{images}</div>
    <p id="fact">{fact}</p>
  </div>
);

ReactDOM.render(animalFacts, document.getElementById("root"));