Animal Fun Fact step 2 and 3 title ternary is not working and 'if else' works only if title is a let

I’m doing the Animal Fun Fact project: link

I added const title = '' as asked in step 2.

In step 3, what I gather the result should be:

const title = '';
title === '' ? 'Click for animal fun fact' : title;

the ternary doesn’t work whatever I try. But neither does the regular if else.
If I switch the const to let however, and use a regular if else, it does work. So now it looks like this:

let title = '';
if (title === '') {
  title = 'Click an animal for a fun fact';
  }

HOWEVER. When, further down in the code, I use this:

const animalFacts = (
  <div>
  <h1>{title === '' ? 'Click for fun fact' : title}</h1>
  {background}
  <div className='animals'>{images}</div>
  <p id='fact'></p>
  </div>  
  );

the ternary DOES work. But again, only when the title is a let, not a const.

So I have two valid solutions, but I don’t understand why the ternary is not working in the first bit. Can someone please explain?

Hi @silvith,

I am going to go ahead and say that this is an error in the project. Thanks for pointing that out!

Constants are variables that you do not want to change, but in this project you are making a flexible “title” variable that will change, so you want to use let.
This is why the second option and the ternary you supplied are correct when using let and the first with const is not.

2 Likes