Animal Fun Fact exercise not displaying the "Fun Fact" when i click

Web Development Full-Stack
1

I am at the end of the project, I followed the video and I think all looks the same as the teacher code:

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'/>

const displayFact(e) {
  const animal = e.target.alt;
  const index = Math.floor(Math.random() * animals[animal].facts.length);
  const funFact = animals[animal].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);

I am not sure why is not working

2

You mix the function declaration syntax with the function expression syntax.

Either use a function declaration
function displayFact(e) {...}

or a function expression
const displayFact = function(e) {...}

or the arrow syntax
const displayFact = (e) => {...}

1 Like
3

Thank you so much! I hate when it is just a small mistake that messes up the block.

1 Like