Animal Fun Facts doesn't render

Continuing the discussion from Animal Fun Facts project not compiling:

I’m pulling my hair out trying to figure out what the issue is.

Even deleting code so it doesn’t render anything doesn’t change what gets shown on the screen.
Tried new private browser and now even the first step doesn’t work

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 = (
    src='/images/ocean.jpg' />

const images = [];

for (let animal in animals) {
  let imageTags = `key:${animal} className='animal' alt=${animal} src=${animals[animal].image} aria-label=${animal} role='button' onClick=${displayFact()}`;
  let image = <img {imageTags} />;

const title = '';
const animalFacts = (
    {showBackground && background}
    <h1>{title ? title : 'Cadfun fact'}</h1>
    <p id='fact'></p>

const displayFact = (e) => {
  const animal =
  const randomIndex = Math.floor(Math.random()*animals[animal].length)

  const funFact = animals[animal][randomIndex];


const showBackground = true;


Are you getting any errors in the browser console related to the page not loading?

This is not valid JSX (Check the key attribute and the template literals):

And this won’t work. You cannot use JS injections within the html tag itself. And it would neither increase performance nor readability to define the image tag in two steps if it worked in the first place, so you should do that in one step:

And last, the function should only be referenced here, not invoked (in addition to not using template literals here):

Thanks! That helped
And now (unrelated, actually) the browser is rendering again. :slight_smile:

1 Like