CODEWITHSUNDEEP
meteorreactjs
Arun George
Arun George

Reputation: 1219

Unterminated JSX contents

In a meteor app, I am trying to render a login form using React.

import React from 'react';

export default class Login extends React.Component {
    render() {
        return (
        <div class="login-card">
            <h1>Log-in</h1><br>
            <form>
                <input type="text" name="user" placeholder="Username" />
                <input type="password" name="pass" placeholder="Password" />
                <input type="submit" name="login" class="login login-submit" value="login" />
            </form>

            <a class="login-help" href="#">Register</a>
        </div>
        );
    }
}

But metor is unable to compile the above jsx file and says .

While processing files with ecmascript (for target web.browser):
   client/loginForm.jsx:15:8: Unterminated JSX contents (15:8)

What can be the reason?

Upvotes: 1

Views: 804

Answers (2)

elreeda
elreeda

Reputation: 4597

You need to close br element, in react always use selft close tags, and also dont use class use className instead

import React from 'react';

export default class Login extends React.Component {
    render() {
        return (
        <div className="login-card">
            <h1>Log-in</h1><br/> // Close br
            <form>
                <input type="text" name="user" placeholder="Username" />
                <input type="password" name="pass" placeholder="Password" />
                <input type="submit" name="login" className="login login-submit" value="login" />
            </form>

            <a className="login-help" href="#">Register</a>
        </div>
        );
    }
}

Upvotes: 1

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

import React from 'react';

export default class Login extends React.Component {
    render() {
        return (
        <div class="login-card">
            <h1>Log-in</h1><br></br>
            <form>
                <input type="text" name="user" placeholder="Username" />
                <input type="password" name="pass" placeholder="Password" />
                <input type="submit" name="login" class="login login-submit" value="login" />
            </form>

            <a class="login-help" href="#">Register</a>
        </div>
        );
    }
}

Close the br tag

Upvotes: 0

Related Questions