I need help with step 4 on Animal Fun Facts project

Web Development Full-Stack
1

Here is the code link: https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/react-101-jsx-u/projects/js-react-animal-fun-facts

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

const title = "";

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

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

I checked the walkthrough video and the steps are correct but I still can’t get the animalFacts variable to render on the screen. I don’t know if there’s a bug or not but can anyone help?

2

Mine displays, but I have done the whole project, so I don’t know if it’d be helpful to you if you’re just on the earlier steps.

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

const title = '';
const showBackground = true;
let 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 background = <img className='background' alt='ocean' src='/images/ocean.jpg' />;
const animalFacts = (
  <div>
    {showBackground && background}
    <p id="fact"></p>
    <div className="animals">
      {images}
    </div>
    <h1>{title === '' ? 'Click an animal for a fun fact' : title}</h1>
  </div>
);

function displayFact(e){
  const selectedAnimal = e.target.alt;
  const animalInfo = animals[selectedAnimal];
  const optionIndex = Math.floor(Math.random() * animalInfo.facts.length);
  const funFact = animalInfo.facts[optionIndex];
  document.getElementById('fact').innerHTML = funFact;
}


ReactDOM.render(animalFacts, document.getElementById('root'));```
3

I am so dumb lol
On line 3 ReactDom was supposed to be ReactDOM
Thanks though!

2 Likes
4

Thank you so much! I had the exact same issue and I couldn’t figure it out myself!! :joy: