Hello!
I’m trying to move the Meteor Blaze ToDo Tutorial in a Meteor+React Project. (Using the last versione of them)
I’m doing this for exercise for learning React but i found that my “List” doesn’t show up until i write something in the form input. if I insert a Task, i need to rewrite something in the input to let the list update.
It’s because i’m not using useTracker so i have to use arrow function syntax + Tracker/hook?
This is my code, thanks for yout anwswering
import React from "react";
import ReactDOM from "react-dom";
import { Tasks } from "../collections/task-collection";
import { Meteor } from 'meteor/meteor';
Meteor.subscribe("tasks");
function Task (props){
return(
<div>
<li>
{props.number}
<button className="delete">x</button>
</li>
</div>
);
}
/****Classe Todolist*****/
class ToDo extends React.Component {
constructor(props) {
super(props);
this.state = {
text: '',
}
this.handleChange=this.handleChange.bind(this);
this.handleSubmit=this.handleSubmit.bind(this);
}
handleChange(e){
this.setState(
{text: e.target.value}
)
}
fetchTask() {
return( Tasks.find({}, {sort: {createdAt: -1}}).fetch())
}
handleSubmit(e) {
e.preventDefault();
const text = e.target.text.value;
Meteor.call('addTask', text);
/**Meteor.call("addTask", text);*/
e.target.text.value = "";
}
render() {
return (
<div className="container">
<header>
<h1>Todo List incompleteCount</h1>
</header>
<form className="new-task" onSubmit={(event)=>this.handleSubmit}>
<input type="text" value={this.state.text} onChange={this.handleChange} name="text" placeholder="Add new tasks"/>
</form>
<ul>
{this.fetchTask().map((number) => <Task key={number._id} number={number.text}/>)}
</ul>
</div>
);
}
}
ReactDOM.render (<ToDo />, document.getElementById('root'));