Hello,
I’m working on the project Animal Fun Facts I got stuck on the 8 task, I’m not sure about nesting it into an array. This is the task “Underneath {background} , create a <div> . Give it a className attribute and set it equal to 'animals' . Nest the array of images inside of this element.” And code can be found on this link
Hello, you actually need to go back to Step 7 so you have the array. That step calls for you to create an array called images by iterating through the animals object with a for..in loop.
If you click the hint for that step, it gives an example of the syntax and idea behind it. Notice in the sample they provided, you’re pushing JSX to the array. So that step wants you to create all the <img ..attributes.. /> elements with attributes being the key, className, src, etc. etc. that they mention in that step.
Once you have that array, then you can move to step 8 and change animalFacts by putting the array you made into the div you already added like you would any other variable.
Let me know if you need more details and/or hints
I seem to be getting a blank page now, I assume I set up the for-in loop incorrectly ?
const images = [];
for (const images in animals) {
images.push(
(<img key={animal} className='animal' alt={animal} scr={animals[animal],image} aria-label={animal} role='button'/>)
)
};
notice anything that could be causing a blank page to render?
In your case, based on the snippet you provided, I suspect the whole page is blank because you’re getting a ReferenceError about animal so it stops the rest of the code from running. You could double-check this by looking at the console for the browser. Take a close look at the name of the const you’re creating in your for loop.
The rest of your code snippet is looking for animal, but your for (const images in animals) is making it use images for each iteration instead. You need to rename that.
Also, even if the rest of your code was set up to use it, images is also the name of the array you’re trying to save the JSX elements to, so it would end up causing issues too.
After you fix that issue, you’ll also need to take a closer look at scr={animals[animal],image}. There are a couple issues here.
src instead of scr
. not a ,
yupp, all of which you mentioned I fixed prior to and forgot to update (thank you)and I have the title and background showing as before; however, still no animal images
const animalFacts = (
<div>
<h1>{title}</h1>
{background}
<div className='animals'>
{images}
</div>
</div>
);
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'/>)
)
};
I guess it must be how images is wrapped in animalFacts?
UPDATE: the for-in loop must go after const animalFacts , this makes sense since you can’t call on the array before it’s populated
Hi! My code is working fine.
I am at step 11, but I can’t get showBackground working. Can Someone help me? This is my code from the whole project:
import { animals } from './animals';
import React from 'react';
import ReactDOM from 'react-dom';
const showBackground = false;
const background = <img className='background' alt='ocean' src='/images/ocean.jpg' />;
const title = '';
function displayFact(e) {
const facts = animals[e.target.alt].facts;
const randomFactIndex = Math.floor(Math.random() * facts.length)
const fact = facts[randomFactIndex];
document.getElementById('fact').innerHTML = fact;
}
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'
onClick={displayFact}
/>)
};
const animalFacts = (
<div>
<h1>{ title === '' ? 'Click an animal for a fun fact' : title }</h1>
{(showBackground === true) && background}
<img
className='background'
alt='ocean'
src='/images/ocean.jpg' />
<div className='animals'>{images}</div>
<p id='fact'></p>
</div>
);
ReactDOM.render(animalFacts, document.getElementById('root'))
https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/react-101-jsx-u/projects/js-react-animal-fun-facts
Thanks in advance!
I don’t know the assignment, but I don’t see anything setting showBackground to true…
Thanks!
I edited my post with a link to the assignment.
I set showBackground to false, so the background shouldn’t show up. There is some code missing. And I don’t know what code to write.