Animals Func fact project step 7

This is the code i wrote for step 7:

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 className="animals"> { images } </div>
  </div>
);

and for some reason only dolphin (the first element in the list) is showing up. I’ve gone through the code many times but can’t seem to figure out whats wrong with it

Please post a link to the lesson.

One thing I notice is this:

The quote marks don’t belong here. They make the curly braces being part of the string. So all images have the same key now, which is wrong.

2 Likes

Thanks for pointing that out. silly mistake haha

1 Like