Simple Todo list app using React and ES6 with functions delete a todo and/or mark a todo as done

todolist.jsx

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'));

Demo can be found http://codepen.io/marekdano/pen/bVNYpq

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

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.

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

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

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

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.

thanks a lottt

…

On Tue, Mar 31, 2020 at 10:53 PM Marek Dano ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Hi, @HanaAnees95 <https://github.com/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. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/615f2310e9154b2d75ba#gistcomment-3234903>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMOS3GPDMOOLQUDJ6N7U2WTRKIRILANCNFSM4LSTHDHA> .

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

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