[React] Animal Fun Facts

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

const background = <img className="background" alt="ocean" src="/images/ocean.jpg" />;

const title = '';

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} />);
}



function displayFact (e) {
  const animal = e.target.alt;
  const index = Math.floor(Math.random() * 3);
  const funFact = animals[animal].facts[index];
  document.getElementById('fact').innerHTML = funFact;
}

const showBackground = true;

const animalFacts = (
  <div>
    <h1>
      { title || "Click an animal for a fun fact" }
    </h1>
    <div className="animals">{images}</div>
    <p id="fact"></p>
    {showBackground && background}
  </div>
);

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