I am extremely new to Meteor, please bear with me.
I am trying to create a user profile in conjunction with the user account that is created using the accounts-password from Meteor.
This is my signup page:
import React from 'react';
import PropTypes from 'prop-types';
import { Meteor } from 'meteor/meteor';
import { Link } from 'react-router';
import { Accounts } from 'meteor/accounts-base';
import { createContainer } from 'meteor/react-meteor-data';
import {Profiles} from '../api/profiles';
export class Signup extends React.Component {
constructor(props) {
super(props);
this.state = {
error: ''
};
}
onSubmit(e) {
e.preventDefault();
let email = this.refs.email.value.trim();
let password = this.refs.password.value.trim();
let firstName = this.refs.firstName.value.trim();
let lastName = this.refs.lastName.value.trim();
let userId;
if (password.length < 8) {
return this.setState({ error: 'Password must be more than 8 characters long' });
}
this.props.createUser({ email, password }, (err) => {
if (err) {
this.setState({ error: err.reason });
} else {
this.setState({ error: '' });
}
useriD = Meteor.userId();
});
this.props.createProfile({ userId, email, firstName, lastName }, (err) => {
if (err){
this.setState({error: err.reason});
} else {
this.setState({error: ''});
}
});
}
render() {
return (
<div className="boxed-view">
<div className="boxed-view__box">
<h1>Join</h1>
{this.state.error ? <p>{this.state.error}</p> : undefined}
<form className="boxed-view__form" onSubmit={this.onSubmit.bind(this)} noValidate>
<input type="text" ref="firstName" name="firstName" placeholder=" First Name" value=""/>
<input type="text" ref="lastName" name="lastName" placeholder=" Last Name" value=""/>
<input type="email" ref="email" name="email" placeholder="Email" />
<input type="password" ref="password" name="password" placeholder="Password" />
<button className="button">Create Account</button>
</form>
<Link to="/">Already have an account?</Link>
</div>
</div>
);
}
}
Signup.propTypes = {
createUser: PropTypes.func.isRequired,
createProfile: PropTypes.func.isRequired
};
export default createContainer(() => {
return {
createUser: Accounts.createUser,
createProfile: Meteor.call('profiles.insert')
};
}, Signup) ;
and this is the profile.js code that i am trying to use:
import { Mongo } from 'meteor/mongo';
import { Meteor } from 'meteor/meteor';
import moment from 'moment';
import SimpleSchema from 'simpl-schema'
export const Profiles = new Mongo.Collection('profiles');
if (Meteor.isServer){
Meteor.publish('profiles', function() {
});
}
Meteor.methods({
'profiles.insert' () {
if (!this.userId) {
throw new Meteor.Error('unauthorized user');
}
return Profiles.insert({
_id: this.userId,
createdAt: moment.valueOf(),
updatedAt: moment.valueOf(),
role: 'user',
email: this.email,
firstName: this.firstName,
lastName: this.lastName,
city: undefined,
state: undefined,
phone: undefined,
gender: undefined,
image: undefined
});
},
'profiles.update' (_id, updates) {
if (!this.userId){
throw new Meteor.Error('unauthorized user');
}
new SimpleSchema({
_id: {
type: String,
min: 1
},
updatedAt: moment.valueOf(),
role: {
type: String,
optional: true
},
email: {
type: String,
optional: true
},
firstName: {
type: String,
optional: true
},
lastName: {
type: String,
otional: true
},
city: {
type: String,
optional: true
},
state: {
type: String,
optional: true
},
phone: {
type: String,
optional: true
},
gender: {
type: String,
optional: true
},
image: {
type: String,
optional: true
}
});
Profiles.update({
_id}, {
$set: {
updatedAt: moment.valueOf(),
...updates
}
});
}
});
I am getting these error messages:
navBar.js:15 Label true
printer.js:170 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of StatelessComponent
.
at invariant (printer.js:170)
at instantiateReactComponent (printer.js:170)
at instantiateChild (printer.js:170)
at printer.js:170
at traverseAllChildrenImpl (printer.js:170)
at traverseAllChildren (printer.js:170)
at Object.instantiateChildren (printer.js:170)
at ReactDOMComponent._reconcilerInstantiateChildren (printer.js:170)
at ReactDOMComponent.mountChildren (printer.js:170)
at ReactDOMComponent._createInitialChildren (printer.js:170)
invariant @ printer.js:170
instantiateReactComponent @ printer.js:170
instantiateChild @ printer.js:170
(anonymous) @ printer.js:170
traverseAllChildrenImpl @ printer.js:170
traverseAllChildren @ printer.js:170
instantiateChildren @ printer.js:170
_reconcilerInstantiateChildren @ printer.js:170
mountChildren @ printer.js:170
_createInitialChildren @ printer.js:170
mountComponent @ printer.js:170
mountComponent @ printer.js:170
mountChildren @ printer.js:170
_createInitialChildren @ printer.js:170
mountComponent @ printer.js:170
mountComponent @ printer.js:170
mountChildren @ printer.js:170
_createInitialChildren @ printer.js:170
mountComponent @ printer.js:170
mountComponent @ printer.js:170
performInitialMount @ printer.js:170
mountComponent @ printer.js:170
mountComponent @ printer.js:170
performInitialMount @ printer.js:170
mountComponent @ printer.js:170
mountComponent @ printer.js:170
performInitialMount @ printer.js:170
mountComponent @ printer.js:170
mountComponent @ printer.js:170
performInitialMount @ printer.js:170
mountComponent @ printer.js:170
mountComponent @ printer.js:170
mountComponentIntoNode @ printer.js:170
perform @ printer.js:170
batchedMountComponentIntoNode @ printer.js:170
perform @ printer.js:170
batchedUpdates @ printer.js:170
batchedUpdates @ printer.js:170
_renderNewRootComponent @ printer.js:170
_renderSubtreeIntoContainer @ printer.js:170
render @ printer.js:170
(anonymous) @ main.js:45
maybeReady @ meteor.js?hash=27829e9…:809
loadingCompleted @ meteor.js?hash=27829e9…:821
printer.js:170 Uncaught TypeError: Cannot read property ‘__reactInternalInstance$2duihnanehb’ of null
at Object.getClosestInstanceFromNode (printer.js:170)
at findParent (printer.js:170)
at handleTopLevelImpl (printer.js:170)
at ReactDefaultBatchingStrategyTransaction.perform (printer.js:170)
at Object.batchedUpdates (printer.js:170)
at Object.batchedUpdates (printer.js:170)
at dispatchEvent (printer.js:170)
getClosestInstanceFromNode @ printer.js:170
findParent @ printer.js:170
handleTopLevelImpl @ printer.js:170
perform @ printer.js:170
batchedUpdates @ printer.js:170
batchedUpdates @ printer.js:170
dispatchEvent @ printer.js:170
printer.js:170 Uncaught TypeError: Cannot read property ‘__reactInternalInstance$2duihnanehb’ of null
at Object.getClosestInstanceFromNode (printer.js:170)
at findParent (printer.js:170)
at handleTopLevelImpl (printer.js:170)
at ReactDefaultBatchingStrategyTransaction.perform (printer.js:170)
at Object.batchedUpdates (printer.js:170)
at Object.batchedUpdates (printer.js:170)
at dispatchEvent (printer.js:170)
also, the text is not appearing when I try to type data in the first and last name inputs.