Animal fun facts - can't go through task 10

Yeah this is weird. I’m guessing it may be connected with the fact that we shouldn’t use arrow function in object methods as far as I remember(scope of .this keyword), and displayFact kind of becomes a function inside an object since it’s kind of called from inside the <img />. But again, it’s only a guess. May as well be a bug on Codecademy’s side (I doubt it though) since the project is very new, it doesn’t even have a video tutorial as of today. As for your second question, again, it’s only a guess, but isn’t ‘key’ a React-specific attribute? Meaning, it’s for React’s under-the-hood purposes and thus not treated as standard HTML attributes.

1 Like

Thanks! I didn’t know get how to target using the alt, so this really helped. I think it’s worth noting though that in your code you don’t actually need the above line because you reference it again two lines below when you get your random fact :wink:

Here’s what I did (with a little inspiration from tera1236914686’s code) & it’s working fine for me:

const displayFact = e => {
  let facts = animals[e.target.alt].facts;
  let rand = Math.floor(Math.random() * animals[e.target.alt].facts.length);
  let fact = facts[rand];
  document.getElementById("fact").innerHTML = fact;
}

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

Does that help?

P.S. I was originally making the mistake of trying to pass an argument to displayFact where it’s called in the onClick attribute, but that’s incorrect. I don’t suppose that’s your problem is it?

i just used console for testing purposes

This block of code is not working for me for some reason and i cannot figure out why. the following is my full code:

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 animalArr = [];
for (let animal in animals) {
  let animalObj= (
    <img 
    key={animal} 
    className='animal' 
    alt={animal} 
    src={animals[animal].image} 
    aria-label={animal} 
    role='button'
    onClick={displayFact} 
    />
  );
  animalArr.push(animalObj);
};

function displayFact(e){
let facts = animals[e.target.alt].facts;
let rand = Math.floor(Math.random() * facts.length)
let fact = animals[e.target.alt].facts[rand];
document.getElementById('fact').innerHTML = fact;
}

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

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

any thoughts?

Your

tag has a className attribute instead of id. Try changing it and see if it works. Everything else seems fine.

it worked! thanks so much! looking at it now it makes sense, and what tripped me up was when the material said that id in html was the equivalent of className in jsx.

Was anyone able to solve for the onClick portion of the project? I am having trouble figuring out how to link the onClick with the individual images of the animals.

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

const title = (name === '' ? 'Wyatt Railey': name);

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}
      aria-label={animal}
      role='button' 
      onClick={displayFact}/>
  ))
}

const displayFact = (e) => {
  let facts = animals[e.target.alt].facts;
  let rand = Math.floor(Math.random() * facts.length)
  let fact = animals[e.target.alt].facts[rand];
  document.getElementById('fact').innerHTML = fact;
}

const animalFacts = (
<div>
  <h1>
    {title}
  </h1>
  <p onClick={displayFact}></p>
  {background}
  <div className='animals'>
    {images}
  </div>
</div>
);


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

The onClick event listener is attached to the images, not the paragraph. That P should just have an id attribute, id="fact".

I don’t know if there is something wrong with the environment, but the listening event is still not working. Is there still something going on with my code?

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

const title = '';
const showBackground = true;

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

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

const displayFact = (e) => {
  let facts = animals[e.target.alt].facts;
  let rand = Math.floor(Math.random() * facts.length)
  let fact = animals[e.target.alt].facts[rand];
  document.getElementById('fact').innerHTML = fact;
}

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


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

You are addressing a function which hasn’t been defined
Just put your displayFact before images

const displayFact = (e) => {
  let facts = animals[e.target.alt].facts;
  let rand = Math.floor(Math.random() * facts.length)
  let fact = animals[e.target.alt].facts[rand];
  document.getElementById('fact').innerHTML = fact;
}

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