Animal Fun Facts project not compiling

Web Development Full-Stack
1

Hello,

I am stuck at step 6 for the Animal fun facts projectt - nothing is rendering and I’ve followed the walkthrough video. I’ve searched this forum for help and it seems others are having a similar problem but I’ve not found a fix yet? Please see my code (as of step 6) below:

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 animalFacts = <h1>{title === ''? 'Click an animal for a fun fact!': title}</h1>;

root.render({animalFacts});

You must select a tag to post in this category. Please find the tag relating to the section of the course you are on

When you ask a question, don’t forget to include a link to the exercise or project you’re dealing with!

If you want to have the best chances of getting a useful answer quickly, make sure you follow our guidelines about how to ask a good question. That way you’ll be helping everyone – helping people to answer your question and helping others who are stuck to find the question and answer! :slight_smile:

2

I’m not subscribed anymore, so I cannot see what Step 6 is asking you to do. But I don’t see an obvious error in your code.
Where are you running the app? In the CC environment or on locally?
If you are running the app locally – check the package.json file for the React version. If it’s lower than 18, createRoot does not work.

You would have to
import ReactDOM from 'react-dom';
rather than
import { createRoot } from 'react-dom/client';

And then
ReactDOM.render(animalFacts, container);

rather than

const root = createRoot(container);
root.render({animalFacts});

But since I don’t know the details it’s just a guess.

3 
// You wrote:
root.render({animalFacts});

// Change it to:
root.render(animalFacts);
2 Likes
4

This worked, thank you so much!

1 Like