Skip to content

Instantly share code, notes, and snippets.

@purezen

purezen/gist:3fff3d7204546b1e34f5

Created November 23, 2015 13:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save purezen/3fff3d7204546b1e34f5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save purezen/3fff3d7204546b1e34f5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. purezen created this gist Nov 23, 2015.
    84 changes: 84 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,84 @@
    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>
    );
    }
    }