react-task-manager

gistfile1.txt

App.js
 
import React, { Component } from 'react';
import TaskList from './TaskList';
import AddTask from './AddTask';
 
export default class App extends Component {
  render() {
    return (
      <div>
        <h4>breeze..</h4>
        <AddTask onTaskSubmit={this.handleTaskSubmit.bind(this)}/>
        <TaskList tasks={this.state.tasks}/>
      </div>
    )
  }
   
  handleTaskSubmit(task) {
    const tasks = this.state.tasks
    const newTask = {id: 10, taskText: task.task, completed: false}
    tasks.push(newTask)
   
    this.setState({ tasks: tasks })
  }
   
  constructor(props) {
    super(props);
    this.state = {
      tasks: [
          {id:1, taskText: 'Task #1', completed: true},
          {id:2, taskText: 'Task #2', completed: false},
          {id:3, taskText: 'Task #3', completed: true}
            ]
    }
  };
}
 
AddTask.js
 
import React, { Component, PropTypes } from 'react';

export default class AddTask extends Component {   
  render() {
    return (
      <div>
        <input type="text" placeholder="Add new task here..." ref="task" />
        <button onClick={this.handleAddNew.bind(this)}>Add Task</button>
      </div>
    )
  }

  handleAddNew(e) {
    e.preventDefault()
    const taskInput = this.refs.task.value.trim()
    
    this.props.onTaskSubmit({ task: taskInput })
    //taskInput.value = ''
    return
  }
 
}

AddTask.propTypes = {
  onTaskSubmit: PropTypes.func.isRequired
}

TaskList.js
 
import React, { Component } from 'react';
 
export default class TaskList extends Component {
  render() {
    var taskList = this.props.tasks.map(function(task) {
        return <input checked={task.completed} type="checkbox" >{task.taskText}</input>
        console.log(task)
    });
 
    return (
      <div>
        {taskList}
      </div>
    );
  }
}