Animal Fun Facts - step 13 problem with render

Please, please could someone see if they can find an error here? There should be a funFact render when I click on an animal image but nothing happens. Any suggestions hugely appreciated!!

Project steps

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 selectedAnimal = e.target.alt; 
  const funFactIndex = Math.floor(Math.random()*animals[selectedAnimal].facts.length);
  const funFact = animals[selectedAnimal].facts.[funFactIndex];
  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);
};

//console.log(images);

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 funFact = animals[selectedAnimal].facts.[funFactIndex];

// It should be:
const funFact = animals[selectedAnimal].facts[funFactIndex];
1 Like

@mtrtmk THANK YOU!!! Iā€™d been staring at for soooooo long :melting_face:

1 Like