Animals Fun Facts

Language Help React.js
1

I cant get the images to the animals to appear for some reason. I’ve copied the guide video to the tee and it still wont show them.

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 background =
ocean;

const images = ;
for(const animal in animals){
const image = (
<img
key:{animal}
className:‘animal’
alt:{animal}
src:{animals[animal].image}
aria-label:{animal}
role:‘button’
/>
);
images.push(image);
}

const animalFacts = (

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

{background}
{images}
);

root.render(animalFacts);

2

If you post your code directly into the forums, formatting is lost and it is difficult to read the code. To preserve code formatting in forum posts, see: [How to] Format code in posts

In your img elements, you are using    :    to separate attributes from their values, whereas    =    should be used.

// You wrote:
<img
key:{animal}
className:'animal'
...

// It should be:
<img
key = {animal}
className = 'animal'
...