Animal Fun Facts doesn't render

[mega4762067166]

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 = (
  <img 
    className='background'
    alt='ocean'
    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} />;
  
  images.push(image);
}

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

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

  const funFact = animals[animal][randomIndex];

  document.getElementById('fact').innerHTML(funFact);
}

const showBackground = true;

root.render(animalFacts);

@katie_derkach18

Hello,

I am stuck at step 6 for the Animal fun facts projectt - nothing is rendering and I’ve followed the walkthrough video. I’ve searched this forum for help and it seems others are having a similar problem but I’ve not found a fix yet? Please see my code (as of step 6) below:

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


const container = document.getElementById('app');
const root = createRoot(container);

const title = '';
const animalFacts = <h1>{title === ''? 'Click an animal for a fun fact!': title}</h1>;

root.render({animalFacts});

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!

[forest_fish12]

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

[staledata]

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

@mega4762067166

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

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:

@mega4762067166

let image = <img {imageTags} />;

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

@mega4762067166

onClick=${displayFact()}

[mega4762067166]

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

[array1294802771]

Please, I’m experiencing the same issue, and can’t even get past the first stage of rendering the H1 element.
I have followed what was shown in the video, but still nothing renders in the local host page.
It is just blank

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

const container = document.getElementById("app");
const root = createRoot(container);

const title = '';
const animalFacts = (<h1>{title === '' ? 'Click an Animal for fun facts.' : title}</h1>);

root.render(animalFacts);

[staledata]

@array1294802771

import { React } from 'react'

React is not a named export. Import it without curly braces.

[array1294802771]

Solves the problem, Thanks so much.
Now, I can proceed.