Animal Fun Facts

[cloud6317704091]

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'));```

[mirja_t]

@cloud6317704091

images of the animals are displayed behind the background image

Sounds like a CSS issue, please post a link to the lesson.

---

@cloud6317704091

why are we creating the animalInfo variable inside of the displayFact() function

Because you need the target of the click event to know what the targeted animal is:

@cloud6317704091

  const selectedAnimal = e.target.alt;

[isolator911]

I think the prebuilt css will correct this if you add className = animals to your div so it looks like

<div className='animals'>{images}</div>