# 14. Building a Todo List App in React

**URL:** <https://forum.kirupa.com/t/14-building-a-todo-list-app-in-react/640206>\
**Category:** Uncategorized\
**Created:** [August 16, 2019, 1:57pm UTC](https://forum.kirupa.com/t/14-building-a-todo-list-app-in-react/640206 "2019-08-16T13:57:35Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![omar-bakhsh](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/omar-bakhsh/32/9836_2.png) [@omar-bakhsh](https://forum.kirupa.com/u/omar-bakhsh)\
**Post date:** [August 16, 2019, 1:57pm UTC](https://forum.kirupa.com/t/14-building-a-todo-list-app-in-react/640206/1 "2019-08-16T13:57:36Z")

</div>

```javascript
import React,{Component} from "react";

class Dragble extends Component{

constructor(props){
	super();

	this.state ={
		items:[]
	};

this.addItem=this.addItem.bind(this);
}

	addItem(e){
		if(this._inputElement !==""){
			var newItem ={
					text:this._inputElement.value,
					key:Date.now()
			};

			this.sestState((prevState)=>{
				return{
					items:prevState.items.concat(newItem)
				};

			});

		}
     this._inputElement.value="";
		console.log(this.state.items);
		e.preventDefault();
	}

	render(){

return (

		<div className="main">
		<div className ="header">
		<form onSubmit={this.addItem}>
		<input type="text" ref={(a)=>this._inputElement =a} placeholder="enter the task" ></input>
		<button type="submit" > add </button>
		</form>
		</div>
	
		</div>

			 );
 }

                               }

export default Dragble;

```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 16, 2019, 4:35pm UTC](https://forum.kirupa.com/t/14-building-a-todo-list-app-in-react/640206/2 "2019-08-16T16:35:59Z")

</div>

Is there a question here? 🙂