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
9

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);
10 
// You wrote:
const funFact = animals[animalClicked].facts.[index]; 

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

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

`

12 
// 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;
13

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

1 Like