Animal Fun Facts - OnClick isn't working

Get Help React.js
,
1

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 right… 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="alt" 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;
}
const animalFacts = (
  <div>
    <h1>{title === "" ? "Click an animal for a fun fact" : title}</h1>
    {background}
    <div className="animals">
      {images}
      <p id="fact"></p>
    </div>
  </div>
);

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

ReactDOM.render(animalFacts, document.getElementById("root"));
2

There are a few potential issues here, but first I’d try putting the for loop directly underneath the images array. You want to make sure that runs before animalFacts. Also, animal facts should be a function, so you’ll need to add the arrow syntax to your const animalFacts

3

I expect the issue is here…

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

This should work:

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

or alternatively:

let optionIndex = Math.floor(Math.random() * animals[selectedAnimal].facts.length);

If you check your console and try logging out your different variables, you should see what the problem is.