Animal Fun Facts _Background image rendering problem!

Hi There. I am recently learning React JSX and I am currently advancing Animal Fun Facts project. The issue with this project is that I can’t advance since I can’t get any further than step 8 because the background image from the path src=‘/images/ocean.jpg’ doesn’t appear. Did I do something wrong?

HERES MY CODE

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








const title = '';

const background = <img className='background' alt="ocean" src='/images/ocean.jpg'/>;

const images = []; 


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




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

I wish for some feedback on this piece of code please.

I think you have an extra stray closing curly brace.


// You wrote:
...
</div>
);
}

//
// It should be:
//
...
</div>
);

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