Animal Fun Facts Task 7

I’m working on the Animal Fun Facts exercise and when I get to Task 7 the html display goes blank. I checked my code against the video tutorial and couldn’t find any differences. However adding the for-in loop seems to break everything. When I remove it I can revert back to the display from Task 6

Here is my code so far

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} ariaLabel: {animal} role: 'button' /> ) }; const animalFacts = ( <div> <h1>{title === '' ? 'Click an animal for a fun fact' : title}</h1> {background} </div> ); ReactDOM.render(animalFacts,document.getElementById("root"));

I have noticed that if I give the img within images.push() no attributes the Task 6 output will still display but a single attribute breaks the code, even if it’s not JSX.

Hi Sean,
welcome to the forums!
If you take a closer look at the Codebyte, you’ll notice the highlighting of syntax errors.
JSX generally uses html syntax. Plain JS is injected with curly braces.
In HTML, attributes are set with an equal sign rather than a colon. Compare it with the background image: There you did it correctly.