Animal

Get Help React.js
#1

I have some issues with random animal facts not showing up I’ve followed the video closely and I believe my code is identical to the tutorial does anyone have input on what I’m doing wrong. Thank you.

import { animals } from './animals';
import React from 'react';
import ReactDOM from 'react-dom';

const title = '';

const background = (
<img className='background' alt='ocean' src='/images/ocean.jpg'/>
)

const images = [];

for (const animal in animals) {
  images.push(
    <img
    key={animal}
    className='animal'
    alt={animal}
    src={animals[animal].image}
    ariaLabel={animal}
    role='button'
    onCLick={displayFact}
    />
  )
}

function displayFact(e) {
  const selectedAnimal = e.target.alt;
  const animalInfo = animal[e.target.alt].facts;
  const optionIndex = Math.floor(Math.random()* animalInfo.facts.length);

  const funFact = animalInfo.facts[optionIndex];
  document.getElementById('fact').innerHTML = funfact;
}

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

ReactDOM.render(animalFacts, document.getElementById("root"));