Can't render images - Animal Fun Facts

Get Help React.js
#1

I’ve been working on the first React project - Animal Fun Facts and am stuck on step 8.

Now that we have our array of images, let’s inject it into the JSX expression.

Within the animalFacts JSX, underneath {background}, create a <div>. Give it a className attribute and set it equal to 'animals'. Nest the array of images inside of this element.

Finally, click Save. We should see our animals!

Below is my code and the images are not rendering. All I see is the title and background.

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

const title = '';

const background = <img className='background' alt='ocean'src = '/images/ocean.jpg'/>

const animalFacts = (
  <div>
  {background}
  <div className='animals'>
  {images}
  </div>
  <h1>
  {title === '' ? 'Click an animal for a fun fact' : title}
  </h1>
  </div>
);

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


ReactDOM.render(animalFacts, document.getElementById('root'));
#2

Try making sure animalFacts is a function. So const animalFacts = () => {} or function animalFacts() {}

#3

No dice. Now nothing is rendering.

#4

Try moving the animalFacts function directly underneath your loop.

#5

I cannot find the bug. nothing is rendering now haha

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

const title = '';

const showBackground = true;

const background = (
  <img 
  className='background' 
  alt='ocean' 
  src='/images/ocean.jpg'/>
  );

const images = [];

for (const animal in animals){
  images.push(
    <img
    key: {animal}
    className: 'animal'
    alt: {animal}
    src: {animals[animal].image}
    ariaLabel: {animal}
    role: 'button'
    onClick = {displayFact}
    />
  )
};

function displayFact(e) {
  const selectedAnimal = e.target.alt;
  const animalInfo = animals[selectedAnimal];
  const optionIndex = Math.floor(Math.random()* animalInfo.facts.length);

  const funFact = animalInfo.facts[optionIndex];
  document.getElementById('fact').innerHTML = funFact;
};

const animalFacts = (
  <div>
    <h1>{title || 'Click an animal for a fun fact'}</h1>
    {showBackground && background}
    <p id='fact'></p>
    <div className='animals'>
     {images}
    </div>
  </div>
);


ReactDOM.render(animalFacts, document.getElementById('root'));
#6

Neither can I haha.
If you have an ad blocker, try turning it off. I know it can sometimes prevent rendering in the localhost window.

#7

Turned off ad blocker but still nothing is rendering. So strange. I have since moved on but hope to one day figure out why it’s not working.

#8

You’re incredibly close! Take another look at this for block that starts on line 18:

Your code uses key: value syntax instead of assigning the attributes with an equal sign.

Once I update the syntax here to be correct (<img key={animal}...), the project seems like it’s more or less complete!

Hope this helps :smile:

3 Likes
#9

Sleep deprivation at its best. Thank you so much! Everything works now!

1 Like