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

Hi all,

It seems my onClick is not working. Am I missing something?

Thanks!

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

const container = document.getElementById('app');
const root = createRoot(container);

const title = '';

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

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

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

  images.push(image);
}

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

root.render(animalFacts);
// You wrote:
const funFact = animals[animalClicked].facts.[index]; 

// Change to:
const funFact = animals[animalClicked].facts[index]; 
1 Like

I having a lot of trouble with step 13.
I tried going step by step with the video even too see what I messed up and couldn’t find it`

import { animals } from "./animals"; import React from "react"; import { createRoot } from "react-dom/client"; const container = document.getElementById('app'); const root = createRoot(container); const title = ''; const background = <img className="background" alt="ocean" src="/images/ocean.jpg" /> ; function displayFact(e) { const animalClicked = e.target.alt; const index = Math.floor(Math.random() * animals[animalClicked].facts.length); const funFact = animals[animalClicked].facts[index]; const p = document.getElementById('fact'); p.innerHTMl = funFact; }; const images = []; for (const animal in animals) { const image = ( <img onClick={displayFact} key={animal} className='animal' alt={animal} src={animals[animal].image} aria-label={animal} role='button' /> ); images.push(image); }; 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>); root.render(animalFacts);

`

// You wrote:
const background = 
  <img className="background" alt="ocean" src="/images/ocean.jpg" />
;

// It should be:
const background = 
  <img className="background" alt="ocean" src="/files/images/ocean.jpg" />
;

// You wrote:
p.innerHTMl = funFact;

// It should be:
p.innerHTML = funFact;

Oh wow, even had to read to solution a couple of times. Thanks!

1 Like