React | Animal Fun Facts | onClick Event

Language Help React.js
1

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.

2

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
3

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
4

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"));
6

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.

7

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
8

Thank you very much!

1 Like