React | Animal Fun Facts | onClick Event

Hello All,

I was going thru the Animal Fun facts (https://www.codecademy.com/courses/react-101/projects/js-react-animal-fun-facts) and not sure I am understanding HOW I am able to get a particular piece of information.

Below is the section I am talking about and represents the state of the project at the end of step 11:

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) {
  console.log(animals)
  let animalName = e.target.alt
  const animalInfo = animals[animalName]
  const optionIndex = Math.floor(Math.random() * animalInfo.facts.length);

  const funFact = animalInfo.facts[optionIndex]
  document.getElementById("fact").innerHTML = funFact
}

Within displayFact() I am doing the following: const animalInfo = animals[animalName]

But how am I able to access animals?

Is it because the onClick's event is allowing that? If so, would that be analogous as to how the src is accessing animals and/or aria-label is getting animal? As you can see I logged out animals and the info is there… but just a bit of a mind twist going on here. Any walk thru help is appreciated.

Hi,
the variable ‘animals’ (containing an object) is provided to you by Codecademy.
It is imported and therefore available at the top of the file:

import { animals } from './animals.js';

In the tabs you see the file animals.js that is exporting ‘animals’.
Does that answer your question?

1 Like

Hey @ mirja_t,

OMG… cannot believe I missed that. I was so focused on the loop, totally missed where IT was getting animals.

Thanks so much :slight_smile:

2 Likes

Good day all, can anyone look at my code and let me know why my onClick is working please. I believe I have done everything as per the tutorial… I’ve searched for typos but nothing. Would appreciate the guidance, thank you.

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= [];

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

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

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


Hi, I think you meant that your onClick is not working…Did you find the solution? I have the same problem. My code is identical to yours.

Is your code identical to the above? If not, consider sharing your code using the </> button.

The problem with core4073627704’s code probably lies in:

const optionIndex = Math.floor(Math.random() * selectedAnimal.facts.length);

selectedAnimal is a string and therefore doesn’t have a facts property.

Instead core4073627704’s code can be corrected as:

const optionIndex = Math.floor(Math.random() * animalInfo.facts.length);

animalInfo is an object and does have a facts property (you can look at the animals.js file to see the structure of animals by clicking the folder icon).

1 Like

Thank you very much!

1 Like