Clicking "save" button doesn't produce any output on right. (React Animal Fun Facts project)

Hi all,

I’m doing this project right now: https://www.codecademy.com/courses/react-101/projects/js-react-animal-fun-facts

But the “save” button is not working. I click on it but no output appears on the right. Neither do i get any error message.

At 05:07 here you can see he clicks “Save” and output comes on right: Learn React JSX Animal Fun Facts - YouTube
So i’m using exactly the same code but no output is coming on the right. Nor any error popups.

Any idea what’s wrong?

Thanks.

Hi, it might be a little thing missing, maybe just a column in your render method or something like that. The slightest type mistake, nothing will render.
Can you share your code so that I can have a look at the whole thing, that might help.

2 Likes

Hi thanks for responding, this is my code (i’ve added a bit more code after the 05:07 timestamp):

import React from 'react';
import ReactDOM from 'react-dom';

import { animals } from './animals';

const title = "";
const background = <img className="background" alt="ocean" src="/images/ocean.jpg" />
const animalFacts = (
<>
<h1>{title === ""? "Click an animal for a fun fact" : title}</h1>;
{background};
</>
)

ReactDOM.render(animalFacts,document.getElementByd('root'));
1 Like

Hi so try removing the semi columns after your H1 and your {background}.
And also check your ReactDOM.render, I believe it should be written this way :

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

It’s fine to write the whole thing in one line but I like to do it that way and you forgot the I in .getElementById(‘root’) .

Let me know if this works for you.

1 Like

Ok i’ve corrected the mistakes (sorry they were so silly):

import React from 'react';
import ReactDOM from 'react-dom';

import { animals } from './animals';

const title = "";
const background = <img className="background" alt="ocean" src="/images/ocean.jpg" />
const animalFacts = (
<>
<h1>{title === ""? "Click an animal for a fun fact" : title}</h1>
{background}
</>
)

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

But it still doesn’t give any output. :frowning: Also, i was hoping the editor would inform me of these syntax errors if i clicked on Submit, i feel the Codecademy UI is not functioning properly. I even tried resetting the project few times but to no avail.

Using React in the Codecademy code editor, wont really throw any errors like it would do with some regular JavaScript or HTML. The only way to check is to use console.log() to check for errors or to setup a react app locally, copy the project then you could use React developer tools to check for errors.

Try replacing your h1 with this :

 <h1>{title == '' ? "Click an animal for a fun fact" : title }    </ h1>

And also replace your double-quotes with single quotes and see if it works.

2 Likes

Also your h1 should be wrapped up in a div element ! That is probably the main reason why nothing is rendering, All JSX elements needs to be wrapped up in an outer most element, for instance a div.

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

Darn you’re right, replacing the empty <></> tags with <div></div> finally worked. I thought <></> was an updated way of doing things… anyway, thanks a lot for your dedicated help, highly appreciate it!

And yes, i’ll definitely have to setup a local project to better troubleshoot future syntax typos, can’t be coming to the forum for them all the time!

1 Like

It’s alright, thats why the community is here for to help each other, well It might still be a good thing to try setting up some projects locally.

Happy Coding !

2 Likes

Thank you, have a good weekend! :smiley:

2 Likes

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.