Animal Fun Fact bug

Having hard time fixing this bug. This is the project Animal Fun Fact: https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-i/modules/fecp-jsx/projects/js-react-animal-fun-facts

This is my code:

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

const title = "";
const images = [];
const showBackground = false;
const background = <img className='background' alt='ocean' src='/images/ocean.jpg' />;
const animalFacts = (
  <div>
    <h1>{title === '' ? 'Click an animal for a fun fact' : title}</h1>
    {showBackground && background}
    <div className='animals'>
      {images}
    </div>
    <p id='fact'></p>
  </div>
);

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

function displayFact(e) {
  const fact = animals[e.taget.alt].facts;
  const randomNum = Math.floor(Math.random() * fact.length);
  const display = fact[randomNum];
  document.getElementbyId('fact').innerHTML = display;
}


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

The problem is, every image is render correct, but when I click on the image, the displayFact doesn’t seems to work.
Would be great if there are other pair of eyes to help me look for the bug!

Thank you :frowning:

Hi Thanh

What do you expect this line to evaluate?
If you would hardcode const fact what would it look like?
You can always use the browser’s console to log the animals object.

Hi Mirja,

My expectation is for the e.target.alt to grab the name of the animal, this name is the key of the animal object

export const animals = {
  dolphin: {
    image: '/images/dolphin.jpg',
    facts: ['Dolphins have been shown to give distinct names to each other!', 'Dolphins are known to display their own culture!', 'Dolphins have two stomachs!']
  },
  lobster: {
    image: '/images/lobster.jpg',
    facts: ['Lobsters taste with their legs!', 'Lobsters chew with their stomachs!', 'Lobsters can live as long as 100 years.']
  },
  starfish: {
    image: '/images/starfish.jpg',
    facts: ['Starfish can have up to 40 arms!', 'Starfish have no brain and no blood!', 'Starfish can regenerate their own arms!']
  }
};

Then from there, it will get the facts key inside that animal which being selected.

Hi Thanh,

you have several spelling errors in your code. Even though this project does not provide a console, you can still use the console of the browser. That is helpful to spot the typos.

The errors I get when I run your code are:
(After clicking on an animal which means that you’ll find the error in your callback:)

app.compiled.js:121 Uncaught TypeError: Cannot read property ‘alt’ of undefined

After that is fixed I get:

Uncaught TypeError: document.getElementbyId is not a function

Then there is this line, but that does not throw an error: