Animal Fun Facts / step 11

Language Help React.js
1

Hi everyone!

I’m struggling with Animal Fun Facts challenge. I did everything for “We should see a fact pop up on the screen!” But, it’s not :melting_face:

Can somebody please tell me what went wrong? I’ve researched Forum and checked the Unstuck video - still didn’t help.

import { animals } from './animals';
//import the React and ReactDOM libraries
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() * animalInfo.facts.length);
  const funFacts = animalInfo.facts[optionIndex];

  document.getElementById('fact').innerHTML = funFacts;
} 


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"));
2

Hello vverhovi.

I’ve been working on the same project and just got step 11 working.

Your code works for me when I paste it into my workspace, But I had to change the render function to use “app” instead of “root”.

ReactDOM.render(animalFacts, document.getElementById(“app”));

If you edited the index.html maybe try resetting your workspace and trying it with “app”

Hopefully this helps!

2 Likes
3

YYYEEEEEESSSSSSS! It’s working!

Thank you for your help! I really didn’t even think to look there :expressionless:

Thank you thank you thank you :hugs:

2 Likes