Animal Fun Fact Task 10 - nothing happens when I click

Hi, I’ve followed the walkthrough video and my code still is not working. When I click on an animal nothing happens.

Also, is it possible to inspect/use devtools to try to debug on my own?

Here’s the code; I’ve tried verifying it against the youtube video and can’t find what’s wrong:

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

const title = '';
 const background = <img class='background' alt='ocean' src = '/images/ocean.jpg' />;

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

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

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

Hi @devplayer59905
Welcome to the forum!

selectedAnimal.facts is undefined. You assigned the variable selectedAnimal just the alt attribute’s value of the image, therefore you are not referencing the object as intended.

I assume you are working in the Codecademy sandbox, but you can open and use the browser’s console anyway. But of course, you can also develop locally and make use of the react developer tools.

1 Like

Working now, thank you so much!

1 Like

I am having the same issue (step 10, nothing happens when I click), but that fix isn’t what is going wrong with me. I have tried to go verbatim per the example but still nothing is happening.

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 = e.target.alt;
  const animalInfo = animals[selectedAnimal];
  const optionIndex = Math.floor(Math.random()*animalInfo.facts.length);
  const funFact = animalInfo.facts[optionIndex];
  document.getElementById('fact').innterHTML = 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 showBackground = true;

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

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

Hi @rgenta90
you have a typo in the function displayFact.

blah thank you so much lol, I’m embarassed!

I also have the same problem

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'
      onClick={displayFact}
    />
  )
}

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

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

Hi @swastikpoojari
It’s the same problem indeed: A typo in the function displayFact.

Thank you @mirja_t . Actually i figured out after i submitted the forum.