Creating user profile

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.

Is there anyone here who can help me with this?

Hi @doghouse308,
It seems createProfile: PropTypes.func.isRequired is a function but what you have specified createProfile: Meteor.call('profiles.insert') is the result of the Meteor.call . I might be totally wrong.
thanks,
Chat.