Animal Fun Facts onClick not working

I cannot figure out why the click event is not working in this exercise:

this is my code:

import { animals } from './animals'; import React from 'react'; import ReactDOM from 'react-dom'; const title=''; const images = []; const background = (<img className='background' src='/images/ocean.jpg' alt='ocean'/>); const animalFacts=( <div> <h1> {title==='' ? 'Click an animal for a fun fact' : title} </h1> {background} <div className='animals'> {images} </div> <p id='fact'></p> </div> ); for (const animal in animals) { images.push( <img key={animal} className='animal' alt={animal} src={animals[animal].image} aria-label={animal} role='button' onClick = {displayFact} /> ) }; function displayFact(e){ const fact = animals[].facts; const randomNum = Math.floor(Math.random()*fact.length); const facts = fact[1]; documents.getElementById('fact').innerHTML = facts; } ReactDOM.render(animalFacts,document.getElementById('root'));

Hi Ibo,

there is a typo in your code:


There is only one document…

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.