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.
const compose = (
It does work however, you added background image twice.
const animalFacts = (
<div>
<h1>{ title === '' ? 'Click an animal for a fun fact' : title }</h1>
{(showBackground === true) && background}
{/*
This shouldn't be here:
<img
className='background'
alt='ocean'
src='/images/ocean.jpg' />
*/}
<div className='animals'>{images}</div>
<p id='fact'></p>
</div>
);
Thank you! It worked You are my hero of the day! 
Hello everyone, i am working on the project and im stuck at step 10, my code isnt displaying the fun fact if i click on the the animals. Please can someone walk me through it if i am making any mistakes. Here’s my code.
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}
aria-label={animal}
role='button'
onClick={displayFact} />
)
};
const displayFact = e => {
const facts = animals[e.target.alt].facts;
const randomFactIndex = Math.floor(Math.random() * facts.length)
const selectedfact = facts[randomFactIndex];
document.getElementById('fact').innerHTML = selectedfact;
};
const animalFacts = (
<div>
<h1>{title === '' ? 'Click an animal for a fun fact' : title}</h1>
{background}
<div className='animals'>
{images}
</div>
<p id='fact'></p>
</div>
);
ReactDOM.render(animalFacts, document.getElementById('root'));
import { animals } from ‘./animals’;
import React from ‘react’;
import ReactDOM from ‘react-dom’;
const title = ‘’;
let images = ;
const showBackground = true;
for(let animal in animals) {
images.push();
}
function displayFact(e) {
let randomNum = Math.floor(Math.random() * animals[e.target.alt].facts.length);
document.getElementById(‘fact’).innerHTML = animals[e.target.alt].facts[randomNum];
}
const background = (
);
const animalFacts = (
ReactDOM.render(animalFacts, document.getElementById(‘root’));
Hello, I get stuck in step 8, the whole page becomes blank, can not figure out the error, everything goes well in step 6, can anyone help me please?
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 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>
);
ReactDOM.render(animalFacts, document.getElementById('root'));
seems works again, do not know why the blank page comes out just now , quite weird
get stuck again, do not know why the page become blank again, this time no magical happens. could anyone help me figure out what wrong with the coding please? thanks
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'
onClick={displayFact}
/>)
)
}
function displayFact(e) = {
const selectedAnimal = e.target.alt;
const animalInfo = animals[selectedAnimal];
const optionIndex = Math.floor(Math.random() * selectedAnimal.facts.length);
const funFact = animalInfo.facts[optionIndex]
document.getElementById('fact').innerHTML = funFact;
};
const animalFacts = (
<div>
<h1>
{title === "" ? "Click an animal for a fun fact" : title}
</h1>
{background}
<p id='fact'></p>
<div className='animals'>
{images}
</div>
</div>
);
ReactDOM.render(animalFacts, document.getElementById('root'));
Your trying to get the length of the wrong object, maybe that will help
const optionIndex = Math.floor(Math.random() * selectedAnimal.facts.length);
Do you really want selecetedAnimals?