Animal Fun Project Step 7/8

[applejaxz]

Alright so, im getting the blank screen of death. I noticed that everything worked up until I tried to complete step 7 and 8. when I hit save i get a blank screen. what am I doing wrong? I watched the video too and compared code with the developer but I still cant figure this out,…any ideas?

mport { 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 images = [];
for (const animal in animals) {
images.push(
  <img
  key: {animal}
  className: 'animal'
  alt: {animal}
  src: {animals[animal].image}
  ariaLabel: {animal}
  role: 'button'
  />
)
};

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


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

[selectall]

The blank screen and lack of proper error reporting in the console if there is a syntax error completely fails can be difficult to work with in the online learning environment on this project. It wouldn’t be so limiting in other development environments, so I’ll be more direct in my nudge in the right direction.

It looks like you’re combining JSX with creating an object here:

@applejaxz

  <img
  key: {animal}
  className: 'animal'
  alt: {animal}
  src: {animals[animal].image}
  ariaLabel: {animal}
  role: 'button'
  />

Compare that to how you used JSX for the background image:

@applejaxz

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

Click if you'd like another hint

You need to use = instead of :
JSX is much closer to HTML.

[applejaxz]

thank you, seriously. I thought I was looking my mind. I looked over it over and over again. After you pointed that out to me I felt dumbfounded. haha wow. thank you. I would have been stuck on this for awhile.