CODEWITHSUNDEEP
javascriptreactjs
szelattila
szelattila

Reputation: 3

Unterminated JSX contents - react

    <div>
      <button style={{width: "100%"}} className="pt-button pt-intent-primary" onClick="{() => { this.authWithFacebook() }}">Log In with Facebook</button>
      <hr style={{marginTop: "10px", marginBottom: "10px"}}>
      <form onSubmit={(event) => { this.authWithEmailPassword(event) }} ref={(form) => { this.loginForm = form }}>
        <div style={{marginBottom: "10px"}} className="pt-callout pt-icon-info-sign">
          <h5>Note</h5>
          If you dont have an account already, this will create you one!
        </div>
        <label className="pt-label">
          Email
          <input style={{width: "100%"}} className="pt-input" name="email" type="email" ref={(input) => {this.emailInput = input}} placeholder="Email"></input>
          Password
          <input style={{width: "100%"}} className="pt-input" name="password" type="password" ref={(input) => {this.passwordInput = input}} placeholder="Password"></input>
        </label>
         <input style={{width: "100%"}} type="submit" className="pt-button pt-intent-primary" value="Log In"></input>
        </form>
    </div>

Error message: 

Syntax error: D:/xxxx/xxxx/xxxx/webWorker/webworker/src/components/Login.js: Unterminated JSX contents (39:14)

I do not know what is the problem, it seems to be OK but I cant run it. Thank you for helping.

Upvotes: 0

Views: 303

Answers (2)

U Rogel
U Rogel

Reputation: 1941

It is mainly about closing the <hr> tag. Better would be also to self-close the <input> tags like so <input type="text" />. As a bonus I separated the <label> tag to each of the input fields, that way whenever you click on the field label it is focusing the right input field.

Before moving on I would recommend to read those two jsx guides: introduction, advanced.

Your code after modifications:

<div>
  <button style={{width: "100%"}} className="pt-button pt-intent-primary" onClick="{() => { this.authWithFacebook() }}">Log In with Facebook</button>
  <hr style={{marginTop: "10px", marginBottom: "10px"}} />
  <form onSubmit={(event) => { this.authWithEmailPassword(event) }} ref={(form) => { this.loginForm = form }}>
    <div style={{marginBottom: "10px"}} className="pt-callout pt-icon-info-sign">
      <h5>Note</h5>
      If you dont have an account already, this will create you one!
    </div>
    <label className="pt-label">
      Email
      <input style={{width: "100%"}} className="pt-input" name="email" type="email" ref={(input) => {this.emailInput = input}} placeholder="Email"/>
      </label>
    <label className="pt-label">
      Password
      <input style={{width: "100%"}} className="pt-input" name="password" type="password" ref={(input) => {this.passwordInput = input}} placeholder="Password"/>
    </label>
     <input style={{width: "100%"}} type="submit" className="pt-button pt-intent-primary" value="Log In"/>
    </form>
</div>

Upvotes: 1

Karen Grigoryan
Karen Grigoryan

Reputation: 5422

Try to close <hr /> tag, also you can have the input tags closed <input />, since they don't have contents either.

Upvotes: 0

Related Questions