Lesrn Reacy JSX Animal Fun Facts - What is wrong wit my code? Every time I save it, nothing loads on the webpage

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={anaimal} 
      role='button'
      onClick={displayFact}
    />
  )
}

function displayFact(e) {
  const selectedAnimal = e.target.alt;
  const animalInfo = animal[selectedAnimal];
  const optionIndex = Math.floor(Math.Random() * animalInfo.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'));
1 Like

Please post a link to this exercise.

Doubt that will be the cause of the problem, but a typo, just the same.

Exercise Page

I’m having a similar problem, but mine broke as soon as I tried to define the images array. (step 7).

I can’t find any issues with the way I’ve defined the array, but if I comment it out, I get the background and title, as soon as I define the array, nothing loads in my browser. I haven’t tried taking the project off-site yet.

Including my app.js file, as it’s the only one I’ve written anything in at this point.

import { animals } from './animals';
import React from 'react';
import ReactDOM from 'react-dom';

const background = <img class='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" />
)};

const title = ''
const animalFacts = (
<div>
<h1>{title === '' ? 'Click an animal for a fun fact' : title}</h1>
{background}
</div>
);




ReactDOM.render(animalFacts, document.getElementById('root'))

Thanks in advance

const background = (
  <img
    className='background'
    alt='ocean'
    src='/images/ocean.jpg'
  />
)

//Declare empty array image
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}
    />
  )
}

Hopefully this helps

yep, it definitely does. thank you

Made it to the second last step, but can’t get my onClick event to fire.
Any suggestions as to what i messed up?

import { animals } from './animals';
import React from 'react';
import ReactDOM from 'react-dom';

const background = <img 
  class='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 = () => {
  const selectedAnimal = e.target.alt;
  const optionIndex = Math.floor(Math.random() * selectedAnimal.facts.length);
  const animalInfo = animal[selectedAnimal];
  const funFact = animalInfo.facts[optionIndex];
  document.getElementById('fact').innerHTML = funFact;
}

const title = ''
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'))

Because you’ve written the function as an ES6 arrow function. That has to be defined before you call it because there is no hoisting for arrow functions as there is for functions written in the old syntax.

hello kindly help me nothing appears on the screen! :sweat_smile:
link to exercise=> js-react-animal-fun-facts

import { animals } from './animals';
import  React  from 'react';
import ReactDOM from 'react-dom';
let title="boy";
const showBackground =true;
//const e = React.createElement;
const background=<img alt="ocean"
src="/images/ocean.jpg" />;
const names=Object.getOwnPropertyNames(animals);

const images=new Array(names.length);
for(const [i,animal] of names.entries()){
images[i]=(<img 
key= {animal}
className="animal"
alt= {animal}
src= {animals[animal].image}
aria-label= {animal}
role= "button"
onClick ={ displayFact}
/>);
}


const animalFacts=(<div>{ showBackground && background}
<hl>{title?title:
'Click an animal for a fun fact'}
 </h1>
 <p id="fact"></p>
  <div className="animals">{images}</div>
  
</div>);

function displayFact(e){
  const name=e.target.alt;
  const ranIndex=Math.floor(Math.random()*3);
const fact=animals[name].facts[ranIndex];
document.getElementById('fact').innerHTML=fact;
}

ReactDOM.render(animalFacts
  ,document.getElementById("root")
);

SOLUTION FOUND! @kyndra_laurie

The solution is to solve the project locally on your own computer using Node.js with the react and react-dom modules installed.

Alternatively you can complete the project entirely on codeacademy platform in your browser if you follow the solution I proposed in this post => Alternative solution

It worked perfectly for me! :sweat_smile: You can look at my code and the live animal fun facts site