4. Style Name Syntax


#1

EXERCISE: LINK

ERROR MESSAGE:
"Oops! The test returned an error. Maybe you have a syntax error, or a typo. Hide error.
at Parser.pp.raise (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/parser/location.js:22:13)
at Parser.pp.unexpected (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/parser/util.js:89:8)
at Parser.pp.jsxParseIdentifier (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/plugins/jsx/index.js:289:10)
at Parser.pp.jsxParseNamespacedName (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/plugins/jsx/index.js:300:19)
at Parser.pp.jsxParseAttribute (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/plugins/jsx/index.js:382:20)
at Parser.pp.jsxParseOpeningElementAt (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/plugins/jsx/index.js:394:31)
at Parser.pp.jsxParseElementAt (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/plugins/jsx/index.js:416:29)
at Parser.pp.jsxParseElement (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/plugins/jsx/index.js:465:15)
at Parser.parseExprAtom (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/plugins/jsx/index.js:16:21)
at Parser.pp.parseExprSubscripts (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/parser/expression.js:272:19)
at Parser.pp.parseMaybeUnary (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/parser/expression.js:252:19)
at Parser.pp.parseExprOps (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/parser/expression.js:183:19)
at Parser.pp.parseMaybeConditional (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/parser/expression.js:165:19)
at Parser.pp.parseMaybeAssign (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/parser/expression.js:128:19)
at Parser.pp.parseVar (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/parser/statement.js:601:24)
at Parser.pp.parseVarStatement (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/parser/statement.js:424:8)
at Parser.pp.parseStatement (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/parser/statement.js:120:19)
at Parser.parseStatement (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/plugins/flow.js:30:22)
at Parser.pp.parseBlockBody (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/parser/statement.js:529:21)
at Parser.pp.parseTopLevel (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/parser/statement.js:36:8)
at Parser.parse (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/parser/index.js:129:19)
at parse (/usr/lib/node_modules/babel-register/node_modules/babylon/lib/index.js:47:47)
at File.parse (/usr/lib/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/index.js:517:34)
at File.parseCode (/usr/lib/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/index.js:603:20)
at /usr/lib/node_modules/babel-register/node_modules/babel-core/lib/transformation/pipeline.js:49:12
at File.wrap (/usr/lib/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/index.js:563:16)
at Pipeline.transform (/usr/lib/node_modules/babel-register/node_modules/babel-core/lib/transformation/pipeline.js:47:17)
at Object.transformFileSync (/usr/lib/node_modules/babel-register/node_modules/babel-core/lib/api/node.js:144:10)
at compile (/usr/lib/node_modules/babel-register/lib/node.js:129:20)
at loader (/usr/lib/node_modules/babel-register/lib/node.js:158:14)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:356:32)
at Object.load (/usr/lib/node_modules/rewire/lib/moduleEnv.js:20:18)
at internalRewire (/usr/lib/node_modules/rewire/lib/rewire.js:57:15)
at rewire (/usr/lib/node_modules/rewire/lib/index.js:11:12)
at Object. (test.js:3:17)
at Module._compile (module.js:456:26)
at loader (/usr/lib/node_modules/babel-register/lib/node.js:158:5)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at /usr/lib/node_modules/mocha/lib/mocha.js:220:27
at Array.forEach (native)
at Mocha.loadFiles (/usr/lib/node_modules/mocha/lib/mocha.js:217:14)
at Mocha.run (/usr/lib/node_modules/mocha/lib/mocha.js:469:10)
at Object. (/usr/lib/node_modules/mocha/bin/_mocha:404:18)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:945:3"

CODE:
StyleMe.js

var React = require('react');
var ReactDOM = require('react-dom');

var styles = {
  background: 'lightblue',
  color: 'darkred',
  marginTop: '100px',
  fontSize: '50px'
};

var styleMe = <h1 style={styles}}>Please style me!  I am so bland!</h1>;

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

#2

Found the answer!

I had a double "}"after "styles" which was unnecessary.

BEFORE (incorrect):

var styleMe = <h1 style={styles}}>Please style me!  I am so bland!</h1>;

AFTER (correct):

var styleMe = <h1 style={styles}>Please style me!  I am so bland!</h1>;

#3

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