Meteor + React: Method call not working

// Form.jsx
import React, { Component } from 'react';

export default class Form extends Component {
  handleSubmit(event) {
    event.preventDefault();

    Meteor.call('contacts.insert', {
      name: this.refs.name.value,
      email: this.refs.email.value,
      phone: this.refs.phone.value
    });
  }

  render() {
    return (
      <div className="row">
        <div className="col-sm-8 center">
          <div className="panel panel-default ">
            <div className="panel-heading">New Connection</div>
            <div className="panel-body">
              <form onSubmit={this.handleSubmit.bind(this)} className="form-horizontal">
                <div className="form-group">
                  <label>Name:</label>
                  <input ref="name" className="form-control" placeholder="Enter name" />
                </div>
                <div className="form-group">
                  <label>Email:</label>
                  <input ref="email" className="form-control" placeholder="Enter email" />
                </div>
                <div className="form-group">
                  <label>Phone:</label>
                  <input ref="phone" className="form-control" placeholder="Enter phone" />
                </div>
                <button className="btn btn-primary">Add New Connection</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

// contacts.js
import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import {SimpleSchema} from 'meteor/aldeed:simple-schema';

Meteor.methods({
  'contacts.insert':function(contact){
     Contacts.insert({ contact });
  }
});

export const Contacts = new Mongo.Collection('contacts');

I’ve attempted to use a Meteor method along with a form to insert a person’s “name”, “email”, and “phone number” into a collections called contacts. When clicking submit, the form doesn’t actually insert the input fields into the collection, and the console doesn’t display any error messages either. Any help regarding this issue would be graciously appreciated! :slight_smile:

Try logging some stuff for example the handleSubmit handler and the start of the meteor method. That way you will know in which method the problem is.

How about checking if your method returns an error?

handleSubmit(event) {
    event.preventDefault();

    Meteor.call('contacts.insert', {
      name: this.refs.name.value,
      email: this.refs.email.value,
      phone: this.refs.phone.value
    }, function(err) {
      if(err) console.error(err);
    });
  }