Error in React Challenge - Introducing Inline Styles

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.
This challenge has a note at the end that says that you can declare the font size as unitless or with its unit. But, when I entered 72px in the editor, it threw this error in the challenge console.

Challenge console error

SyntaxError: unknown: Identifier directly after number. (4:45)

  2 |   render() {
  3 |     return (
> 4 |       <div style={{color: "red", fontSize: 72px}}>Big Red</div>
    |                                              ^
  5 |     );
  6 |   }
  7 | };

  **Your code so far**


class Colorful extends React.Component {
render() {
  return (
    <div style={{color: "red", fontSize: 72}}>Big Red</div>
  );
}
};

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:90.0) Gecko/20100101 Firefox/90.0

Challenge: Introducing Inline Styles

Link to the challenge:

2

72px needs to be wrapped in quotes.

3

The challenge isn’t very clear about it. But the inline styles object is just a plain JS object. 16 is a number 16px (without quotes) is an invalid identifier.

const obj = {
  fontSize: 16px
}
// Uncaught SyntaxError: Invalid or unexpected token

const test = 16px;
// Uncaught SyntaxError: Invalid or unexpected token

const obj = {
  fontSize: "16px"
}

obj.fontSize
// "16px"

const obj = {
  fontSize: 16
}

obj.fontSize
// 16
4

Thanks you guys. Adding quotes did the trick.

5

Thanks for the detailed explanation.

6

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