Animal facts exercise

Language Help JavaScript
,
1

I’ve been ripping my hair out with this. It seems to render only when it feels like it. When it does render, it doesnt update when I save it again. Here’s my code. Does anyone know why it isnt rendering?

import { animals } from ‘./animals’;

import React from ‘react’;

import { createRoot } from ‘react-dom/client’;

const container = document.getElementById(‘app’);
const root = createRoot(container);

const title=“”;
const background=<img className=“background” alt= “ocean” src= “/images/ocean.jpg”;

const images=;
for (const animal in animals){
images.push(
key={animal}
className= ‘animal’
alt={animal}
src= {animals[animal].image}
ariaLabel= {animal}
role= ‘button’
onClick = {displayFact}
)

};
function displayFact(e){
const animalName = e.target.alt;
const optionIndex = Math.floor(Math.random() * animalName.facts.length);
const funFact = animalName[optionIndex];
document.getElementById(‘fact’).innerHTML= funFact;
}
const animalFacts=(

<h1<{title===“”? Click an animal for a fun fact!: title};
{background}

{images}
); root.render(animalFacts);

[https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-react-part-i/modules/wdcp-22-jsx/projects/js-react-animal-fun-facts]

2

Can you re-post your code with proper formatting?

To preserve code formatting in forum posts, see: [How to] Format code in posts

When you post directly into the forum, characters get warped or go missing, so it is difficult to tell whether it is just a consequence of pasting into the forums or whether you have made a typo/mistake in the actual code of the exercise/project. For example, in the code you posted:

const background=<img className=“background” alt= “ocean” src= “/images/ocean.jpg”;

there seems to be a missing closing tag <img />, but I can’t tell if it is just because of copy/pasting. Properly formatted code (using backticks) will remove this ambiguity. There are a few other spots where similar ambiguity is evident.

Apart from the above, one noticeable issue is:

const optionIndex = Math.floor(Math.random() * animalName.facts.length);
const funFact = animalName[optionIndex];

See this post for why the above isn’t correct:
https://discuss.codecademy.com/t/animal-facts-react-help/747756/2

1 Like
3

I can see a few issues within your animalFacts expression.
Check to make sure your h1 elements are properly formatted and closed.
There is also a string in your ternary expression that might be causing an error.

This is probably not causing an error, but I would check the attributes. ariaLabel is named incorrectly.

1 Like
4

Thanks for your help. I dont think it’s the ternary expression as I replaced this with a fixed string and it still didnt work. I tried it with the basic ‘Hello world’, too and it didnt always render.

On occasions when it did render, ie, when it said ‘hello world’, the next time it still said ‘hello world’ even though I’d changed the code.

I think it has to be either the import statements or some kind of browser setings issue. Is there a way of testing this on localhost anyone? I’ve put this on the back-burner for now,

5

There are more issues as addressed by @mtrtmk that stop your code from rendering properly. But this ternary is indeed a problem:

Unless the quotemarks aren’t invisible due to a lack of formatting, you have a string without quotemarks inside the JS injection, which is causing an error because it’s taken for a non existing variable with syntax errors (spaces).
Also, the h1 tag is broken as mentioned by @chip9119454969 . You do not close it and the title should be rendered as the content of the h1 tag, so a self closing tag is not an option here:

<h1>{title==='' ? 'Click an animal for a fun fact!' : title}</h1>
2 Likes
6

This doesnt work either for this particular excercise:

import { animals } from ‘./animals’;

import React from ‘react’;

import { createRoot } from ‘react-dom/client’;

const container = document.getElementById(‘app’);

const root = createRoot(container);

const AnimalFacts='<h1>Hello World</h1>;

root.render(AnimalFacts);

IS anything wrong here?

7

Please format your code. As mentioned above, syntax errors aren’t obvious when the code isn’t formatted properly.

2 Likes
8

for some strange reason, it’s rendering now I chagned this line:

const optionIndex = Math.floor(Math.random() * animals[animalName].facts.length);

except a random letter is being displayed and not the animal name.

9

If you haven’t changed the line const funFact = animalName[optionIndex]; yet, the issue has been addressed here:

2 Likes