Help with the Animal Facts React/JS project

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

const title = ''; 

const background = (

const images = [];

for (const animal in animals) {
      onClick: {displayFact}; 

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

  const funFact = animalInfo.facts[optionIndex]; 

const animalFacts = (
  <h1>{title === '' ? 'Click an animal for a fun fact' : title}</h1>
  <p id='fact'>{displayFact}</p>
  <div className='animals'>

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

I’ve watched the video work-through of this project multiple times now, and have followed the instructions and the video, but I still can’t get this code to do what it’s supposed to do. Up until the 7th step where I have to add the Images array, my project is working perfectly, but as soon as I complete step 7, it breaks. I can no longer see the background image, and then nothing from there on works. If anybody can point out an error in my code that is preventing me from completing this project, that would be delightful.

Hi Kayli,
compare what you did here:

with what you did here:

In one case you set the attributes/props with an equal sign, in the other you used a colon. Just one is correct.

I tried to set both of the sets of code to colons, and then both to equal signs, but I’m still having trouble with rendering the code. I’m not sure where I’ve gone wrong. I followed the steps to a T, and even looked at the hints.

The attributes/props of an image tag are set as you would do it in html: with an equal sign.

And you need to remove the semicolon.