Animal Fun Fact - REACT: images not displaying properly

[ungaikyo]

I sent a bug report but maybe other people can see if they have the same problem with this assignment:

I’m currently at step 10 of the project where you need to render images of animals on top of a background. Because the styling of this document is not completely done by us, I think the problem lies with Codecademy.

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='animal'>{images}</div>
  </div> );  

root.render(animalFacts);

At first the images for animals didn’t render at all and the root.render line was all white. I solved that by deleting and retyping the entire animalFact constant the exact same way as I had done before then the root.render was shown colored and worked (hope this makes sense).

Then I noticed a tiny dolphin at the back of my background image that is being displayed on the right side. When I inspect the page it shows that the animal images are rendered as a div with flex column settings @ 33.3% width…

I’m just curious if anyone else has been having this problem? I’m using Google as my browser and am not using add-blocker or anything else.

This is the first time I’m using the forums to post something. I hope I put this question in the right place ^^;

[jameskeezer]

Welcome to the forums!

In animalFacts this has a typo: <div className='animal'>{images}</div>

Change the class name to animals

[ungaikyo]

Thank you for the fast reply. I changed the className to ‘animals’.
This did not change the problem though. I followed the getUnstuck video to no avail. so after that I decided to skip through the excersize.

Any feedback is always appreciated

[mtrtmk]

I think jameskeezer’s observation about the className was the likely cause for the behavior you were seeing.

The only difference between the two screenshots below is animal versus animals,

• With className='animal':

• With className='animals':

Also, if you browse the directory and look at the styles.css file, you will see the rules:

.animals {
  display: flex;
  flex-direction: row;
  position: fixed;
  width: 90%;
  margin-top: 240px;
  z-index: 2;
}

.animal {
  width: 33.3%;
}

which would explain why the class name is making a difference.

[ungaikyo]

Thanks for showing me the screenshots. I tried to apply the afformentioned to my assignment. But didn’t see the expected result after hitting save. I checked the css file that you refer to in your screenshot and I can see that it is supposed to work differently; however this is what keeps showing up when using the Chorme Dev Tools:

Maybe it’s something on my end that is causing the problem then…
I’ll try re-doing the entire assignment again. Thanks to both for the feedback.

[mtrtmk]

In your editor, you have

<div className='animals'>{images}</div>

which is correct.

But for some reason, in your screenshot of DevTools, the div is still appearing with a class of animal.

The images are supposed to have a class of animal, whereas the div is supposed to have a class of animals. In your screenshot of the editor, your code is correct. But it is not showing up correctly in the DevTools. Perhaps it has to do with cache or some setting of DevTools.

[ungaikyo]

Figured as much. Thanks for the feedback. And I see that it is Happy Cakdeday to you !