Hi, I am finishing the Animal Fun Facts project, but for some reason images of the animals are displayed behind the background image. Also, if someone can explain why are we creating the animalInfo variable inside of the displayFact() function, it would be much appreciated! Thanks in advance!
import { animals } from './animals';
import React from 'react';
import ReactDOM from 'react-dom';
const title = '';
const background = (
<img
className='background'
alt='ocean'
src='/images/ocean.jpg'/>
);
const images = [];
for (const animal in animals) {
images.push(
<img
key={animal}
className='animal'
alt={animal}
src={animals[animal].image}
ariaLabel={animal}
role='button'
/>
)
}
function displayFact (e) {
const selectedAnimal = e.target.alt;
const animalInfo = animals[selectedAnimal];
const optionIndex = Math.floor(Math.random() * selectedAnimal.facts.length);
const funFact = animalInfo.facts[optionIndex];
}
const animalFacts = (
<div>
<h1>{title == '' ? 'Click an animal for a fun fact' : title}</h1>
{background}
<div>{images}</div>
<p id="fact"></p>
</div>
);
ReactDOM.render(animalFacts, document.getElementById('root'));```