Account base: options.password must be a string - reactjs

Question

I looked into some similar problems and added .value. But always get error: options.password must be a string, even I cast the password.value.toString().
import React, {Component} from 'react';
import ReactDom from 'react-dom';
import { Accounts } from 'meteor/accounts-base';
class Register extends Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit (event){
event.preventDefault();
console.log(this.email.value);
console.log(this.password.value);
const res = Accounts.createUser(this.email.value, this.password.value.toString());
console.log(res);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div className="form-group">
<label htmlFor="email">Email:</label>
<input className="form-control" type="email" ref={(email) => this.email = email}/>
</div>
<div className="form-group">
<label htmlFor="password">Password:</label>
<input className="form-control" type="password" ref={(password) => this.password = password}/>
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary">Submit</button>
</div>
</form>
);
}
}
export default Register;

Answer 1

You need to pass an object, not 2 string arguments:
const res = Accounts.createUser({
email: this.email.value,
password: this.password.value,
});
EDIT:
About your React component, using states and controlled components is a better practice than refs:
import React, {Component} from 'react';
import ReactDom from 'react-dom';
import { Accounts } from 'meteor/accounts-base';
class Register extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
}
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInputChange(event) {
const target = event.target;
const name = target.name;
this.setState({
[name]: value,
});
}
handleSubmit (event){
event.preventDefault();
const res = Accounts.createUser({
email: this.state.email,
password: this.state.password,
});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div className="form-group">
<label htmlFor="email">Email:</label>
<input className="form-control" type="email" name="email" onChange={this.handleInputChange} />
</div>
<div className="form-group">
<label htmlFor="password">Password:</label>
<input className="form-control" type="password" name="password" onChange={this.handleInputChange} />
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary">Submit</button>
</div>
</form>
);
}
}