Animal Fun Facts steps 9-10 animal images not rendering!

Language Help React.js
1

I am very much not sure why the animal pictures aren’t rendering in front of the background image. I’ve looked in the walkthrough and my code SEEMS to be the same.
I believe it has to do with the for loop? Very confused.

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 = <img 
  className='background'
  alt='ocean'
  src='/images/ocean.jpg'
  />;

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 = 
  (
    <div>
      <h1>{title === '' ? 'Click an animal for a fun fact' : title}
      </h1>
      {background}
      <div className='animals'>{images}</div>
    </div>
  );

root.render(animalFacts);
2

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'
...
1 Like
3

Oh thank god it’s just that, I thought I was going crazy. Thank you!!!

1 Like