Stuck on JSX Animal Facts project - nothing is rendering on browser

Get Help JavaScript
,
#1

Hey Everyone,

Hate to be that guy, but I have spent too much time trying to figure this out myself. I usually catch myself misspelling things but it seems this is not one of those times. I am on the Build Web Apps with React path and trying to complete the Animal Facts project. I have not finished it yet, but the code I have so far should be rendering a title and a background image below the title on the browser on the right, but it does not. I have gone through the unstuck video and made sure the code is even formatted in the same way so it would be simpler for me to catch errors but I am clearly missing something. Please help! Here’s all the code I have so far:

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

const title = "";

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

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

ReactDOM.render(animalFacts, document.getElementById("root"));
#2

Hi,
In your h1 block you’ve got a ternary expression. The second ? should be a :
The rest looks ok, i think.

1 Like
#3

You’re absolutely right! Thanks so much for that. I feel ashamed now :smiley: