Animal Fun Fact Project with VS - looping through animals!

Hello! I’m doing the animal fun facts in Visual studio. I’m trying to make the UI responsible, I’m having difficulties because of the for loop. I want to have three columns, each animal in separate column… I tried to wrap the Animal key={animal} and all the other attributes to a container-row-col but only one row appears.

for (const animal in animals) {
    images.push(
      <div className='container'>
        <div className='row'>
          <div className='col'>
            <Animal
              key={animal}
              alt={animal}
              src={animals[animal].images}
              onClick={displayFact}
              aria-label={animal}
            />
          </div>
        </div>
      </div>
    );
  }

mod edited formatting

Hello, and welcome back to the forums

The original project was responsive and had three columns with an animal in each already:

This was done with a CSS flexbox and the image widths of the animals being set to 33.3%.

It looks like you’re trying to do it a different way with CSS that wasn’t included. It also looks like you’ve gone ahead and created an Animal component that wasn’t used in the original project too. Your component may only return JSX for the image, but I’m not sure. Did you already complete the original instructions and now you’re taking it to the next level?

One other observation is that you used {animals[animal].images} instead of {animals[animal].image}, so I assume you changed the original data structure provided with the project too

Without more information and all the modified code (like the CSS and your JSX), it’s difficult to provide specific advice. It’s possible that you shouldn’t have a container / row / and column for each Animal like you’re doing right now. Whatever you do in that code block you posted, will be repeated for each animal. Whatever ends up containing these will need to be able to lay out each of these the way you want.

Some generic advice could be to test out your containers, columns, and rows in a regular HTML / CSS file first. You could just use a placeholder image temporarily, and copy / paste the block of code however many times you need (like 3 times). This would allow you to rapidly test the styles until you’re comfortable with the CSS. You may find that the approach of adding a container, row, and column for each image may not be the way to go.

1 Like