import React from 'react';
class TodoList extends React.Component{
 constructor(props){
   super(props)
   this.state = {
     list:[],
     inputValue:"",
   }
 }
 addItem(){
   this.setState({
       list:[this.state.list,this.state.inputValue],
       inputValue:""
     })
 }
 todoListText(e){
   this.setState({
     inputValue:e.target.value
   })
 }
 render(){
   return(
     <div>
       <div>
         <input value={this.state.inputValue} onChange={this.todoListText.bind(this)} />
         <button onClick={this.addItem.bind(this)}>add</button>
       </div>
       <ul>
         {
           this.state.list.map((item,index)=>{
             return <li key={index}> {item} </li>
           })
         }
       </ul>
     </div>
   )
 }
}
export default TodoList;