Single Curly Bracket Error in example if.js


#1

In this topic ‘JSX Conditionals: If Statements That Do Work’, I find that }Else doesn’t have an opening curly { prior to it.
Can confirm this is a mistake?

import React from ‘react’;
import ReactDOM from ‘react-dom’;

let message;

if (user.age >= drinkingAge) {
message = (


Hey, check out this alcoholic beverage!


);
} else {
message = (


Hey, check out these earrings I got at Claire’s!


);
}

ReactDOM.render(
message,
document.getElementById(‘app’)
);


#2

Ignore this. I found the opening curly bracket to prior to Else.
Sorry, I can’t find a way to delete this and ask another question…
However my actual problem is in the exercise itself. I called forth the solution given, but I can’t generate any image when the solution says I am supposed to have either dog or cat appear in the coin toss app when I run it.
import React from ‘react’;
import ReactDOM from ‘react-dom’;

function coinToss() {
// This function will randomly return either ‘heads’ or ‘tails’.
return Math.random() < 0.5 ? ‘heads’ : ‘tails’;
}

const pics = {
kitty: ‘https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg’,
doggy: ‘https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg
};
let img;
// if/else statement begins here:
{if (coinToss === ‘heads’),
img = (

);
}else{
img = (

);
}

ReactDOM.render(img, document.getElementById(‘app’));

Anyone else has this problem? Is it a bug?
Nevertheless the yellow ‘next’ appears which allows me to go on to the next page.


#3

Hi @ok45sg1205511349 k45,

If it helps, below is an updated version of your code: Please note comments.
Further below that is one possible solution.
Please note IMPORT declarations have been removed.

function coinToss() {
// This function will randomly return either ‘heads’ or ‘tails’.
return Math.random() < 0.5 ? ‘heads’ : ‘tails’;
}

const pics = {
kitty: ‘https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg’,
doggy: ‘https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg’
};
let img;
// if/else statement begins here:
{if (coinToss === ‘heads’), //You have an opening curly brace before IF that shouldn't be there.
img = (
     //In here should be the JSX element representation you wish to display when the coinToss is heads
    //please see final solution below
);
}else{
img = (
    //Same for this assignment: This should be the JSX for image. Also below :)
);
}

ReactDOM.render(img, document.getElementById(‘app’));

The following is just the code you pasted updated, to try and give a comparision.

//A Final version

function coinToss() {
  return Math.random() < 0.5 ? 'heads' : 'tails';
}

const pics = {
  kitty: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg',
  doggy: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg'
};

let img;
if (coinToss() === 'heads') {
  img = <img src={pics.kitty} />;
}
else {
  img = <img src={pics.doggy} />;
}

ReactDOM.render(img, document.getElementById('app'));


#4

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