meteor__simple-todos-react/App.jsx

// App component : represents the whole app.

App = React.createClass({

  // This mixin makes the getMeteorData work.
  mixins: [ReactMeteorData],

  // Loads items from the Tasks collection and puts them on this.data.tasks.
  getMeteorData() {
    let result = {
      tasks: Tasks.find({}).fetch()
    };
    // Meteor._debug("result", result);
    return result;
  },

  renderTasks() {
    return this.data.tasks.map((task) => {
      // Meteor._debug(task._id);
      return <Task key={task._id} task={task} />;
    });
  },

  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo list</h1>

          {/* These are JSX comments. */}
          <form className="new-task" onsubmit={this.handleSubmit} >
            <input type="text" ref="textInput" placeholder="Type to add new tasks" />
            </form>
          </header>

        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
});