Animal Fun Facts Project - no output on screen, when running program


I have so far fulfilled the Animal Fun Facts project, but unfortunately not a single text or image is showed on screen. I have being going over and over to try to discover any mistake I have made, but cannot figure it out. After every task I pressed on save. Task 3 is the first assignment whereas a header should appear on screen, nope. I just continued to finish the project with no result on screen.

Could somebody please guide me what I need to do in order to get the project on screen. See please my code below:

import { animals } from ‘./animals’;



import React from ‘react’;

import ReactDOM from ‘react-dom’;

//2 h1 title not on screen

const title= “”;

const showBackground = false

const images = ;

const animalFacts= (

{title=== ''?'Click an animal for a fun fact':title}

{showBackground && background}

<p id= 'fact'


const background = <img className=‘background’ alt= ‘ocean’ src= ‘/images/ocean.jpg’


for (const animal in animals) {



key: {animal}

className: ‘animal’

alt: {animal}

src: {animals[animal].image}

aria-label: {animal}

role: ‘button’

onClick = {displayFact}




function displayFact(e) {

const fact = [].facts;

const randomNumber = Math.floor(Math.random) * fact.length;

const facts = fact(RandomNum);

document.getElementById(‘fact’).innerHTML = facts;



ReactDOM.render(animalFacts, document.getElementById(‘root’));

Thank you so much!:slight_smile:

Kind regards, Yasmine

You must select a tag to post in this category. Please find the tag relating to the section of the course you are on

When you ask a question, don’t forget to include a link to the exercise or project you’re dealing with!

If you want to have the best chances of getting a useful answer quickly, make sure you follow our guidelines about how to ask a good question. That way you’ll be helping everyone – helping people to answer your question and helping others who are stuck to find the question and answer! :slight_smile: