TodoApp-coders-tokyo-react

by Van Hai Le

HTML

<div id="root"></div>

CSS

* {
	font-family: 'Roboto', 'Arial', sans-serif;
}

.todo-item {
	color: #4d4d4d;
}

.todo-item {
	text-align: center;
	margin-bottom: 8px;
}

.todo-item--done {
	opacity: 0.3;
	text-decoration: line-through;
}

React

class ToDoItem extends React.Component {

	render() {
		let {item, onClick} = this.props;
		return (
			<div onClick={onClick(item)} className={item.isCompleted ? 'todo-item todo-item--done' : 'todo-item'}>
				<p>{item.title}</p>
			</div>
		)
	}
}

class App extends React.Component {

	constructor() {
		super();
		this.state = {
			items: [
			{ title: 'Đá bóng', isCompleted: true },
			{ title: 'Lập trình', isCompleted: false },
			{ title: 'Tập thể dục', isCompleted: false }
		]
		};
		this.onItemClick = this.onItemClick.bind(this);
	}
	onItemClick(item) {
		let {isCompleted} = item;
		let {items} = this.state;
		return () => {
			let index = items.indexOf(item);
			this.setState({
				items: [
					...items.slice(0, index),
					{
						title: item.title,
						isCompleted: !isCompleted
					},
					...items.slice(index + 1)
				]
			});
		}
	}
	render() {
		return (
			<div className='App'>
				{
					this.state.items.map((item, index) => <ToDoItem key={index} item={item} onClick={this.onItemClick}/>)
				}
			</div>
		)
	}
}

ReactDOM.render(<App />, document.getElementById('root'));