65 lines
2.3 KiB
JavaScript
65 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import Li from './Li.js';
|
|
import 'bootstrap/dist/css/bootstrap.css';
|
|
|
|
|
|
|
|
|
|
class TodoList extends React.Component {
|
|
constructor(props){
|
|
super(props)
|
|
this.state = {
|
|
todoList : [
|
|
{todo: 'Clean the bathroom' , at:'2020'},
|
|
{todo: 'Buy Milk', at:'2019'},
|
|
{todo: 'Walk the dog' , at:'2018'},
|
|
]
|
|
}
|
|
}
|
|
|
|
addToList = () => {
|
|
let todo = document.getElementById('user_input').value;
|
|
if (todo !== '') {
|
|
let tmp_state = this.state.todoList;
|
|
tmp_state.push({todo:todo, at:'This year'})
|
|
this.setState({tmp_state})
|
|
}
|
|
}
|
|
render(){
|
|
return (
|
|
<div className="page-content page-container" id="page-content">
|
|
<div className="padding">
|
|
<div className="row container d-flex justify-content-center">
|
|
<div className="col-lg-12">
|
|
<div className="card px-3">
|
|
<div className="card-body">
|
|
<h4 className="card-title">Awesome Todo list</h4>
|
|
<div className="add-items d-flex">
|
|
<input className="form-control todo-list-input" id="user_input" />
|
|
<button className="add btn btn-primary font-weight-bold todo-list-add-btn" onClick={this.addToList}>Add</button>
|
|
</div>
|
|
<div className="list-wrapper">
|
|
<ul className="d-flex flex-column-reverse todo-list">
|
|
{
|
|
this.state.todoList.map( (element, index) => (
|
|
<Li
|
|
key={index}
|
|
id={index}
|
|
todo={element.todo}
|
|
at={element.at}
|
|
/>
|
|
))
|
|
}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
export default TodoList
|