Animal Fun Facts - Intro to React Project

[ethan1elohim]

Link to exercise: https://www.codecademy.com/courses/learn-react-introduction/projects/js-react-animal-fun-facts

My code was running fine and the background was showing up until I implemented step 7. I’m not sure why the screen is white - I’ve looked at other code too and can’t find what’s wrong.

Here is my code:

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 images = [];

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

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

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

[mirja_t]

@ethan1elohim

className=‘animal’

Looks like the quotes aren’t right.

@ethan1elohim

aria-label

And those should be camelCased in JSX.

[ethan1elohim]

Thank you. Fixing the quotes fixed it.