const { Component } = React; class App extends Component { constructor(props) { super(props); this.state = { done: [], //array to store done tasks list: [], //array to store current tasks input: "" //input from form to create new tasks }; //bind functions to this this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.removeTask = this.removeTask.bind(this); this.finishTask = this.finishTask.bind(this); this.removeCompletedTask = this.removeCompletedTask.bind(this); } //capture user input handleChange(event) { this.setState({ input: event.target.value }); } // use componentDidMount() to set intial state from localstorage componentDidMount() { let completed = JSON.parse(localStorage.getItem('completedTasks')); let current = JSON.parse(localStorage.getItem('currentTasks')); if(!completed == null && current == null) { this.setState({ done: completed, list: current }); } } //use componentDidUpdate to update localstorage on each state change componentDidUpdate() { localStorage.setItem('completedTasks', JSON.stringify(this.state.done)); localStorage.setItem('currentTasks', JSON.stringify(this.state.list)); let completed = JSON.parse(localStorage.getItem('completedTasks')); console.log(completed); let current = JSON.parse(localStorage.getItem('currentTasks')); console.log(current); } //function to finish task finishTask(finishedItem) { let newArray = this.state.list.filter(targetItem => { return targetItem != finishedItem; }); this.setState({ list: newArray, done: [...this.state.done, finishedItem] }); } //function to remove completed task removeCompletedTask(deletedItem) { let newArray = this.state.done.filter(targetItem => { return targetItem != deletedItem; }); this.setState({ done: newArray }); } //function to remove task removeTask(deletedItem) { let newArray = this.state.list.filter(targetItem => { return targetItem != deletedItem; }); this.setState({ list: newArray }); } //handle form submit handleSubmit(event) { event.preventDefault(); if (this.state.input === "") { alert("Please enter a task"); } else { this.setState({ list: [...this.state.list, { text: this.state.input, date: moment(new Date()).format("h:mm a") } ], input: ""}); } } render() { return (

Do all the things.

); } } const List = props => { let doneList; let currentList; let doneTitle; let donehr; let currenthr; let currentTitle; if (props.list.length > 0) { currentTitle =
Current Tasks
; currenthr =
; currentList = props.list.map(function(item) { return (

{item.text}

{item.date}

); }); } if (props.done.length > 0) { doneTitle =
Completed Tasks
; donehr =
; doneList = props.done.map(function(item) { return (

{item.text}

{moment(new Date()).format("h:mm a")}

); }); } return (
{currentTitle} {currenthr}
{currentList}
{doneTitle} {donehr}
{doneList}

); }; ReactDOM.render(, document.getElementById("root"));

Jason

Bio!

Simple To Do List

CSS Grid Page