Animal fun facts - why is nothing rendering? Is this a big or have I made an error?

From what I can see there doesn’t seem to be anything wrong with my code? I’m unsure whether this is a bug or just something I’ve missed. When I tried the AI ‘explain code’ it explained it exactly what I’m trying to do but still nothing rendering.

Please help! Thanks

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

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

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

React is a default export. Import it without curly braces:

import React from 'react';
2 Likes

Thanks for the response, I’ve fixed this although there’s still nothing rendering.

And add ‘from’ here.

2 Likes