Animals - not displaying fun facts

Hello ! Tried to find a solution in other topics but no luck - nothing works for me.
Current problem - facts are not being displayed “onClick” instead error below is shown “Can’t find variable: animal”.

Not understanding where the problem is - any help appriciated.
Course - https://www.codecademy.com/courses/react-101/projects/js-react-animal-fun-facts

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

function displayFact(e) {
  const selectedAnimal = animals[e.target.alt].facts;
  const animalInfo = animal[selectedAnimal];
  const optionIndex = Math.floor(Math.random() * animalInfo.facts.length);
  
  const funFact = animalInfo.facts[optionIndex];
  document.getElementById('fact').innerHTML = funFact;
  console.log(funFact);

}

const images = [];

for (const animal in animals) {
  images.push(
    <img
      key={animal}
      className='animal'
      alt={animal}
      src={animals[animal].image}
      aria-Label={animal}
      role='button'
      onClick={displayFact}
    />
  )
}

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

ReactDOM.render(
animalFacts,
document.getElementById("root")
);

Sorry for double-post. After spending the last hour or so trying to figure out where the problem is and even creating this topic I finally found it…

The mistake was in the function displayFact, I was missing an ‘s’ in const animalInfo = animals[selectedAnimal];

Maybe this is gonna be useful to someone - always check for spelling issues 100000x (I did that, just had to do it one more time to spot it) before reaching out for help :smiley: Although in IDE’s this would be automatically highlighted I suppose.

Thanks !

1 Like