Trying to learn React JS / JSX at the moment and have gotten stuck creating a simple login form:
/**
* @jsx React.DOM
*/
var loginForm = React.createClass({
getInitialState: function() {
return {loggedIn : false};
},
login : function(event) {
alert('logging in');
},
logout : function(event) {
alert('logging out');
},
render: function() {
return (
<div>
<form /*action={this.server+'/login.php'}*/>
<label htmlFor="username">Username:</label>
<input type="text" id="username" name="username" />
<label htmlFor="password">Password:</label>
<input type="password" id="password" name="password" />
</form>
</div>
<div>
<button onClick={this.login}> Login </button>
<button onClick={this.logout}> Logout </button>
</div>
)
}
});
React.renderComponent(
<loginForm />,
document.body
);
If I remove the <button>
tags it works fine but otherwise an error is thrown:
Uncaught Error: Parse Error: Line 27: Unexpected identifier
<button onChange={this.logout}> Logout ...
^
fiddle: http://jsfiddle.net/4TpnG/90/
You're trying to return two divs from the function. In the docs it says:
Currently, in a component's render, you can only return one node; if you have, say, a list of divs to return, you must wrap your components within a div, span or any other component.
Don't forget that JSX compiles into regular js; returning two functions doesn't really make syntactic sense. Likewise, don't put more than one child in a ternary.
So you can fix it by wrapping your two root divs in a single div; or moving your second root div (with the buttons) into the first one.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With