Animal Fun Facts problem

Web Development Full-Stack
1

Hi i am in step 13 and for some reason I cant find mistake, I have the images of animals displayed but on click there is no fun fact about them, tried to find mistake with walkthrough video but nothing found. Please for help.

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

The opening p tag is missing a ‘>’:

Should be:

<p id='fact'></p>

Or make it self closing:

<p id='fact'/>

And use camelCase for attributes in React:

ariaLabel={animal}
3 Likes