2.closing tags


#1


What is the proper slash placement for closing tags. This doesn't seem to be correct.


SyntaxError: /home/ccuser/workspace/learn-react-01-03-02/app.js: Unterminated JSX contents (12:12)
10 | THANKS HA LOT
11 |

12 |
| ^
13 | );


Replace this line with your code. 
var profile = (
  <div>
    <h1>I AM JENKINS</h1>
    <img src="images/jenkins.png" >
    <article>
      I LIKE TO SIT
      <br>
      JENKINS IS MY NAME
      </br>
      THANKS HA LOT
        </article>
      </div>
);


#2

For self-closing tags, like <br>, in JSX you close it like this: <br />.


#3

So would the code be like this?

var profile = (
  <div>
    <h1>I AM JENKINS</h1>
    <img src="images/jenkins.png" >
    <article>
      I LIKE TO SIT
      <br>
      JENKINS IS MY NAME
      <br />
      THANKS HA LOT
    </article>
  </div>
);

#4

Because that doesn't work..


#5

And it shows this:

SyntaxError: /home/ccuser/workspace/learn-react-01-03-02/app.js: Expected corresponding JSX closing tag for
(11:4)
9 |

10 | THANKS HA LOT

11 |
| ^
12 |
13 | );
at Parser.pp.raise (/usr/lib/node_modules/babelify/node_modules/babylon/lib/parser/location.js:22:13)
at Parser.pp.jsxParseElementAt (/usr/lib/node_modules/babelify/node_modules/babylon/lib/plugins/jsx/index.js:446:12)
at Parser.pp.jsxParseElementAt (/usr/lib/node_modules/babelify/node_modules/babylon/lib/plugins/jsx/index.js:429:30)
at Parser.pp.jsxParseElementAt (/usr/lib/node_modules/babelify/node_modules/babylon/lib/plugins/jsx/index.js:429:30)
at Parser.pp.jsxParseElementAt (/usr/lib/node_modules/babelify/node_modules/babylon/lib/plugins/jsx/index.js:429:30)
at Parser.pp.jsxParseElement (/usr/lib/node_modules/babelify/node_modules/babylon/lib/plugins/jsx/index.js:465:15)
at Parser.parseExprAtom (/usr/lib/node_modules/babelify/node_modules/babylon/lib/plugins/jsx/index.js:16:21)
at Parser.pp.parseExprSubscripts (/usr/lib/node_modules/babelify/node_modules/babylon/lib/parser/expression.js:272:19)
at Parser.pp.parseMaybeUnary (/usr/lib/node_modules/babelify/node_modules/babylon/lib/parser/expression.js:252:19)
at Parser.pp.parseExprOps (/usr/lib/node_modules/babelify/node_modules/babylon/lib/parser/expression.js:183:19)


#6

You probably need to "close" (these elements are not self-closing, they are void elements) the first br and img also:

var profile = (
  <div>
    <h1>I AM JENKINS</h1>
    <img src="images/jenkins.png" />
    <article>
      I LIKE TO SIT
      <br />
      JENKINS IS MY NAME
      <br />
      THANKS HA LOT
    </article>
  </div>
);

#7

Oh I get it now, @factoradic Thanks!


#8

No need to thank me, I simply applied hint given by @albionsrefuge to your code :slight_smile:


#9

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