Insert failed: Access denied. No allow validators set on restricted collection for method 'insert'

Hello I am working on a Meteor-React project and fairly new in this. I was trying to follow this meteor.com/tutorials/react/forms-and-events. I am trying to insert new object into existing collection but it shows error as indicated in the title.

This is my component responsible for inserting new item at the UI level.

import React, { useState, useEffect } from "react";
import newTask from '../api/create'

export default Create = () => {
  const [task, createTask] = useState('');
  handleKeyPress = (event) => {
    if(event.key === 'Enter'){
      newTask(task)
    }
}
return (
<form className="add-task" noValidate="">
  <div>
    <div className="fieldset add-task-input fieldset-stripped">
      <div className="fieldset-content">
        <label className="fieldset-label">
          <span className="fieldset-label-content has-icon">
            <i className="icon-plus" />
          </span>
          <input
            className=""
            name="title"
            placeholder="Add new task"
            type="text"
            autoComplete="off"
            value={task}
            onChange={(e) => { createTask(e.target.value)}}
            onKeyPress={this.handleKeyPress}
          />
        </label>
       </div>
     </div>
   </div>
  </form>
 )
}

This is the method that I am trying to export and import into the component file above.

import { Tasks } from '../../tasks';

export default newTask = (taskTitle) => Tasks.insert({
  title: taskTitle,
  dueDate: null,
  repeat: {},
  color: '#4e42c3',
  status: 'incomplete',
  customFields: []
})

I have tried using methods proposed by others as below, by adding the code below into the method file above:

Tasks.allow({
  insert: function () {
    return true;
  }
})

But still it does not work and show the same error as insert failed: Access denied… . Any idea how to enable inserting new item into the Mongo Collection ?

The allow part needs to be imported/executed on the server side. Sounds to me like you’re doing it purely client-side.

Also, don’t do this:

onChange={(e) => { createTask(e.target.value)}}

do this instead:

export default Create = () => {
...
onTaskEdit = e => {
   //deal with the input e.target.value
}

return (
   ...
   <input
      ...
      onChange={onTaskEdit}
    />
);

the previous method creates an additional function every time the component re-renders which doesn’t do wonders for performance.