I’m currently building a To-Do app using Meteor.js 3.0 and React, and I’m facing an issue where my tasks aren’t getting saved to the database when added via the form. The data is being passed correctly, but the tasks aren’t appearing in the UI after submission.
I’m using the Meteor.callAsync("tasks.insert", { text: text.trim(), createdAt: new Date() }) method to insert tasks into the collection, and I’ve ensured that MongoDB is properly configured. But after submission, the tasks are not showing in the list, and I’m not receiving any error messages.
Has anyone encountered this issue before? Could this be a subscription issue, or am I missing something in how the tasks are inserted?
Here’s the link to the Meteor.js + React documentation I’m following: (docs.meteor.com/tutorials/react/)
Here’s my code for the task insertion:
import React, { useState } from "react";
import { TasksCollection } from "/imports/api/TasksCollection";
export const TaskForm = () => {
const [text, setText] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
if (!text) return;
try {
await Meteor.callAsync("tasks.insert", {
text: text.trim(),
createdAt: new Date(),
});
setText(""); // Reset the input field
} catch (error) {
console.error("Error inserting task:", error);
}
};
return (
<form className="task-form" onSubmit={handleSubmit}>
<input
type="text"
placeholder="Type to add new tasks"
value={text}
onChange={(e) => setText(e.target.value)}
/>
<button type="submit">Add Task</button>
</form>
);
};
And my publication:
Meteor.publish("tasks", function () {
const userId = this.userId;
if (!userId) return this.ready();
return TasksCollection.find({ userId });
});
Any advice or solutions would be greatly appreciated!