Unterminated JSX contents - meteor

Question

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?

Answer 1

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>
);
}
}

Answer 2

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