Animal Fun Fact Issue with OnClick step13

Having issues with step 13 of the Animal Fun Facts Project. Even followed walkthrough to see why it wasn’t working and seems identical but no matter what I fix the fun facts don’t show up when animals clicked.
https://www.codecademy.com/journeys/front-end-engineer/paths/fecj-22-front-end-development/tracks/fecj-22-react-part-i/modules/wdcp-22-jsx-8f99184f-c8e2-4beb-a4ec-834368b988f9/projects/js-react-animal-fun-facts

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
      key={animal}
      className='animal'
      alt={animal}
      src={animals[animal].image}
      aria-label={animal}
      role='button'
      onClick={displayFact}
    />
  );

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

Just correct the typo in p.innerHTML. The rest is fine.

1 Like