Animal Fun Facts

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

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


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

1 Like

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>

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.