Animal Fun Facts

Get Help React.js
#1

Hello,
my code is breaking on this exercise on line 9 and I don´t know why, I will appreciate any help. :pray:
thank you,

Here the link:
https://www.codecademy.com/paths/build-web-apps-with-react/tracks/bwa-intro-to-react/modules/react-101-jsx-u/projects/js-react-animal-fun-facts

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'));
#2

You are pushing an html element to the array. So you need to apply the html syntax. That means you need to use equal signs rather than colons for the assignment of attributes.

2 Likes
#3

thank you mirja_t ! Yes I just copy pasted that code from that instructions, but it was a bit strange to me.

1 Like