Animal Fun Facts

Get Help React.js
1

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

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