Project - Animal Fun Facts

Get Help React.js
,
23

Had the same issue.

The reason why it doesn’t display the fact is because your displayFact() is defined after the call inside the loop.

If you move the entire function before the loop it should display correctly!

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


const title = '';

function displayFact(e) {
  // name of the animal the event is targeting
  const animal = e.target.alt;
  // selects the animal from the animals object
  const selectedAnimal = animals[animal];
  // selects a random facts from the facts array inside the animals[animal] object
  const randomIndex = Math.floor(Math.random() * selectedAnimal.facts.length);
  // takes the value of the fact with randomIndex
  const fact = selectedAnimal.facts[randomIndex];
  document.getElementById('fact').innerHTML = fact;
};

const images = [];
for (const animal in animals) {
  images.push(
    <img 
      key={animal}
      className="animal"
      alt={animal}
      src={animals[animal].image}
      arial-label={animal}
      role='button'
      onClick={displayFact}
    />
  );
};
const showBackground = true;
const background = <img 
  className="background"
  alt="ocean"
  src="/images/ocean.jpg" />;

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

ReactDOM.render(animalFacts, document.getElementById('root'));
1 Like
24

I got up to step 8 and the images aren’t appearing as expected. I can barely see the dolphin’s head at the bottom. I think the images are just too big to all show on the screen. Here is my code:

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

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

ReactDOM.render(animalFacts, document.getElementById('root'))
25

Not sure if anyone is having this issue, but if you set className to {animal}…set it to ‘animal’ instead. The class should reference an actual class within the stylesheet, not the reference var within the for…in.

26

Hi everyone!

I’ve just finished Animal Fun Facts project. I had a problem with a displayFact function. Firstly I declared it like this but it didn’t work:

const displayFact = e => {
  const animalName = e.target.alt;
  const facts = animals[animalName]['facts'];
  const factIndex = Math.floor(Math.random()*facts.length);
  const fact = facts[factIndex];
  document.getElementById('fact').innerHTML = fact; 
};

I had watched tutorial on youtube and changed arrow function into function declaration with exactly the same code inside:

function displayFact(e) {
  const animalName = e.target.alt;
  const facts = animals[animalName]['facts'];
  const factIndex = Math.floor(Math.random()*facts.length);
  const fact = facts[factIndex];
  document.getElementById('fact').innerHTML = fact; 
}

Suprisingly for me, it worked.

Probably I missed something on my learning path and I will be grateful if anyone could tell me why arrow function with exactly the same code inside didn’t work?