import React from 'react';
import './App.css';

import List from './Components/List';
import TaskForm from './Components/TaskForm';

import TaskList from './Sample/TaskList.json'
class App extends React.Component{
  
  state = {
    taskLists: TaskList
  }
  
  addTask = (title,description) => {
    const newTask = {
      title: title,
      description: description,
      id: this.state.taskLists.length
    }
    this.setState({
      taskLists : [...this.state.taskLists, newTask]
    })
  }

  render(){
    return(
      <div>
        <TaskForm addTask={this.addTask} />
        <List tasks={this.state.taskLists} />
      </div>
    );
  }
}

export default App;