Animal Fun Facts Project has a bug

#get-help

Just wanted to report a bug.

I’m doing the first React Project, ‘Animal Fun fact’ I’m on the 10th step, Finished aside from the extraCredit. I’ve done everything to the T… I even refactored my code to the way they had on the ‘unstuck’ video instead of using an function App() to render everything, and yet to no avail. The click doesn’t work, So i opened dev tools on fireFox I get:

‘Uncaught TypeError: animalInfo is undefined’

everything is correct in my code though…at least I think so. I double and triple checked, I switched browsers to Chrome and i get;

‘Uncaught TypeError: Cannot read property ‘facts’ of undefined’

This is my full code below,

///////////////////////////////////////////////////////////////////////

Thanks in advance if you find an error I can’t seem to nail, or please fix this bug. I’m by no means that new to react, just can’t seem to figure this out, unless I’m making a dumb spelling mistake somewhere that I just can’t see, There has to be a bug.

for(const animal in animals) 

What is animals?

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!']
  }
};

So what will animal be? It won’t be the key it will be the actual object. You need to change your loop to loop over the keys of animals - then use that as alt.

Edit: just noticed you used for in - for some reason reason had python in my head despite it clearly being JavaScript. Either way alt is hard coded to the string ‘animal’.

Hello, and welcome to the forums!

We know from the error message that it’s coming from the displayFact() function because of the variable names the error references and because it would show in the trace.

The error message you received also mentioned animalInfo being undefined, so it’s important to check how that value is being set.

  const selectedAnimal = e.target.alt;
  const animalInfo = animals[selectedAnimal];

So if animalInfo is becoming undefined and it uses the alt tag of the selected image, then we need to check how the alt tag is set:

    <img
      key={animal}
      className='animal'
      alt='animal'
      src={animals[animal].image}
      ariaLabel={animal}
      role='button'
      onClick={displayFact}
    />

Looks like you’ve hard-coded the alt to “animal” instead of using the animal name like you did for the key. You should revisit Step 7.

WOW! thank you so much. I spent close to 3 hours trying to figure that out. There’s so much more for me to learn :sweat_smile:

Ty so much for the prompt answers! hahaha :call_me_hand: Pro membership is truly worth it!

1 Like