Animal Fun Facts

Language Help React.js
1

My onclick isn’t displaying the images?

Is there anything wrong with my 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 background = (
  <img 
    className='background' 
    alt='ocean' 
    src='/images/ocean.jpg'
  />
);

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


const title = "";
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

You are missing a closing parenthesis    )    for images.push

3

Absolute legend

Did the job! Thanks