React Todo List

by nabendu

HTML

<div id="app"></div>

CSS

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

React

class TodoApp extends React.Component {
	constructor(props) {
  	super(props);
    this.state = {
    	list: [],
      inputText: ''
    }
    this.onSubmit = this.onSubmit.bind(this);
    this.changedText = this.changedText.bind(this);
  }
  
  onSubmit(e) {
  	this.setState({
    	list: [...this.state.list, this.state.inputText],
      inputText: ''
    })
  }
  
  changedText(e) {
  	this.setState({
    	inputText: e.target.value
    })
  }
  
  render() {
  	return (
    			<div>
    			  <input type="text" value={this.state.inputText} onChange={this.changedText} />
            <button onClick={this.onSubmit}>Add</button> 
            <div>{this.state.list && this.state.list.map((item, key)=>{
            	return <li>{item}</li>
            })}</div>
            
    			</div>    
    
    )
  
  
  }

}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))