Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple Todo list app using React and ES6 with functions delete a todo and/or mark a todo as done
import React from 'react';
/*
Todo app structure
TodoApp
- TodoHeader
- TodoList
- TodoListItem #1
- TodoListItem #2
...
- TodoListItem #N
- TodoForm
*/
var todoItems = [];
todoItems.push({index: 1, value: "learn react", done: false});
todoItems.push({index: 2, value: "Go shopping", done: true});
todoItems.push({index: 3, value: "buy flowers", done: true});
class TodoList extends React.Component {
render () {
var items = this.props.items.map((item, index) => {
return (
<TodoListItem key={index} item={item} index={index}
removeItem={this.props.removeItem}
markTodoDone={this.props.markTodoDone} />
);
});
return (
<ul className="list-group"> {items} </ul>
);
}
}
class TodoListItem extends React.Component {
constructor(props) {
super(props);
this.onClickClose = this.onClickClose.bind(this);
this.onClickDone = this.onClickDone.bind(this);
}
onClickClose() {
var index = parseInt(this.props.index);
this.props.removeItem(index);
}
onClickDone() {
var index = parseInt(this.props.index);
this.props.markTodoDone(index);
}
render () {
var todoClass = this.props.item.done ?
"done" : "undone";
return(
<li className="list-group-item ">
<div className={todoClass}>
<span className="glyphicon glyphicon-ok icon" aria-hidden="true"
onClick={this.onClickDone}></span>
{this.props.item.value}
<button type="button" className="close"
onClick={this.onClickClose}>&times;</button>
</div>
</li>
);
}
}
class TodoForm extends React.Component {
constructor(props) {
super(props);
this.onSubmit = this.onSubmit.bind(this);
}
componentDidMount() {
React.findDOMNode(this.refs.itemName).focus();
}
onSubmit(event) {
event.preventDefault();
var input = React.findDOMNode(this.refs.itemName);
var newItemValue = input.value;
if(newItemValue) {
this.props.addItem({newItemValue});
input.value = '';
}
}
render () {
return (
<form onSubmit={this.onSubmit} className="form-inline">
<input type="text" ref="itemName" className="form-control"
placeholder="add a new todo..."/>
<button type="submit" className="btn btn-default">Add</button>
</form>
);
}
}
class TodoHeader extends React.Component {
render () {
return <h1>Todo list</h1>;
}
}
class TodoApp extends React.Component {
constructor (props) {
super(props);
this.addItem = this.addItem.bind(this);
this.removeItem = this.removeItem.bind(this);
this.markTodoDone = this.markTodoDone.bind(this);
this.state = {todoItems: todoItems};
}
addItem(todoItem) {
todoItems.unshift({
index: todoItems.length+1,
value: todoItem.newItemValue,
done: false
});
this.setState({todoItems: todoItems});
}
removeItem (itemIndex) {
todoItems.splice(itemIndex, 1);
this.setState({todoItems: todoItems});
}
markTodoDone(itemIndex) {
var todo = todoItems[itemIndex];
todoItems.splice(itemIndex, 1);
todo.done = !todo.done;
todo.done ? todoItems.push(todo) : todoItems.unshift(todo);
this.setState({todoItems: todoItems});
}
render() {
return (
<div id="main">
<TodoHeader />
<TodoList items={this.props.initItems}
removeItem={this.removeItem}
markTodoDone={this.markTodoDone}/>
<TodoForm addItem={this.addItem} />
</div>
);
}
}
React.render(<TodoApp initItems={todoItems}/>, document.getElementById('app'));
@marekdano

This comment has been minimized.

Copy link
Owner Author

@marekdano marekdano commented Sep 9, 2015

@HanaAnees95

This comment has been minimized.

Copy link

@HanaAnees95 HanaAnees95 commented Mar 24, 2020

Do you have edit (Edit an item in the list) part in this code?

@marekdano

This comment has been minimized.

Copy link
Owner Author

@marekdano marekdano commented Mar 24, 2020

Hi, @HanaAnees95. There is no function to edit an item in the list. But it'll be easy to implement it after the whole code is rewritten in React hooks. This code is quite old, tbh.

@HanaAnees95

This comment has been minimized.

Copy link

@HanaAnees95 HanaAnees95 commented Mar 24, 2020

Do you have React Hooks code for this? Can you implement an Edit for this and give? (with React Hooks)

@HanaAnees95

This comment has been minimized.

Copy link

@HanaAnees95 HanaAnees95 commented Mar 24, 2020

Will you be able to mail the new version of the code in this?

@marekdano

This comment has been minimized.

Copy link
Owner Author

@marekdano marekdano commented Mar 24, 2020

When I update it here, you'll be notified about it.

@marekdano

This comment has been minimized.

Copy link
Owner Author

@marekdano marekdano commented Mar 31, 2020

Hi, @HanaAnees95 - I've just updated todolist. It uses the latest version of React (hooks) and it can be found here https://gist.github.com/marekdano/ac2bd147c8144df9500e9e02f8753ab2
I also added functionality for editing a todo name when it's clicked on.

@HanaAnees95

This comment has been minimized.

Copy link

@HanaAnees95 HanaAnees95 commented Apr 1, 2020

@rmda

This comment has been minimized.

Copy link

@rmda rmda commented Oct 17, 2020

Thank you @marekdano, I was going nuts trying to make a todo list where I could delete individual items.

@marekdano

This comment has been minimized.

Copy link
Owner Author

@marekdano marekdano commented Oct 17, 2020

no prob @rmda, happy that the gist helped you. If you want to see the implementation of the todolist with react hooks, check https://gist.github.com/marekdano/ac2bd147c8144df9500e9e02f8753ab2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment