Animal fun facts number 7

Use a for...in loop to iterate over the animals object that we’re importing on line 1. Before the animalFacts definition, define an images array. For each animal, add a new <img /> to that array.

Assuming animal is the placeholder variable in your for...in loop, each image should have the following attributes:

  • key : {animal}
  • className : 'animal'
  • alt : {animal}
  • src : {animals[animal].image}
  • aria-label : {animal}
  • role : 'button'

i don’t understand that why ‘src’ use square barcket for refer to animal [animal], I looking on anilmals.js animals is nested object. I confuse that square backet should use with array. Why in this case there use square backet whit object reference? I try to use src: {animals.animal.image} but It’s not work.

1 Like

Hi,
I recommend that you log the variables ‘animal’ and ‘animals’ to the console. I know there is no console in the sandbox, but you can still use the browser’s console. It shows what you log to the console, too.
Spoiler: ‘animal’ will just log a string, e.g. ‘dolphin’. That does not work as a source path:
<img src="dolphin"/>
would not be a valid image tag.

2 Likes

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.