Project - Animal Fun Facts

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

1 Like

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

1 Like

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.

More Details

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.

More info if you need it
  • Should be src instead of scr
  • You need to access the image property of the object with a . 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

2 Likes

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!

1 Like

I don’t know the assignment, but I don’t see anything setting showBackground to true…

1 Like

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 = (

{animalFacts} {showBackground && background}
{images}
);

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! :heart_eyes:

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({animal});
}

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 = (
ocean
);
const animalFacts = (

{title ? title : 'Click an animal for fun fact'}

{showBackground && background}
{images}
);

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?

Not sure if you still need help but I see you have three small issues to fix.

First, change the ariaLabel attribute name to => aria-label

Secondly, just like megarockstar95901 mentioned your trying to access the wrong object’s length. selectedAnimal object doesn’t exist you need the access the animals object on line one, which you already have in the second line of your displayFact function, so all you need to do is swap the selectedAnimal variable with the animalInfo variable inside of the math.Floor() method.

Lastly, your displayFact function has an = sign right after the closing parentheses causing the app to crash and not render anything to the window.

These challenges without a console tend to be quite frustrating because you can’t see these little errors causing your app to crash. Hopfully this helped you out in anyway.