simple react example

simple-react-example.js

// http://mikelambert.me/react/?#rVTBbptAED2brxhxAilZq9fERqocVYrUqlLcWxRVBCYxDbB0d3BiWfx7Z3cxrGkS5xAJyzAwb968fTNZmWoNv2QuV5uizAFfCOtcww2mGYmVrBpZY02wDwAyWWtSbUZSRY2SjY5NdKbbBg+BSw50/OPrEemasLquc3yJ0H2KolG4ZbwrfEjbkiKbAECbQguLII7SvHhhAvEIr5gml7W45olaVUf2HmBRFsnez2XADhb3LZGsgXYNLkP3EIKsV2WRPS3d9351cc81LYW4S84Xc5eRLOaMbgs5Nl0QZIOI3wtN+hNF3KR1XuINVnKL0e9tWvb9es0p+9Kwdh942adkasskmM2mSmlRpU0UmdszcLLDMoHFaBJfpV44n6gvHBiY5d6dQOES7F8HT7gb7udJ3AUzpjQ3nN4Q92v+Kf60uvQSakoJYQn7XhLD8wLC0D5203NYt/dVQafMPD0gbbO+SVVFY02rtO9+jbQ2L6LXqcRTLiv+e8QPcSmRLBr3iYJSxccn2Ckt/qfGwMGe10en7YFb4zly6iz34BnCxTxDQJf0aZxY1E1L/TwSn6ydRtvXMYqLHaGAbaA336iocdKIfzTw7hjChF00zPKhg7lpYeK7wLfeu76bWM8f0am/iLH0xe3d1F9Ti3mj/o5FHJongQ0IJpOlFN0akLt49I/FOrFYBsMo1Mx7in05aa2vqBveoQ7nDL7YWm/Snr3O+nWa7/ouL7beYTfJBstSPsOzVLyjDD7wRajJCiWEWMybJBgzxoVt196RmSynDsblemrP+b47LKtx8k9OhZ8/uHJocDSl9d/Vzx+iV8bW4uQzyGXWVmxJ8bdFtVtjidaNofijz5XJOpct8byFMe+Gfw==


class TodoChild extends React.Component {
  constructor(props){
  	super(props);
  }
  
  getItemIndex(e){
  	e.preventDefault();
    this.props.getItemIndex(this.props.index)
  }
  
  render(){
    return(
      <li>{this.props.item} <button type="button" onClick={this.getItemIndex.bind(this)}>-</button></li>
    )
  }
}

class TodoLists extends React.Component {
  constructor(props){
  	super(props);
  }
  
  handleRemove(_val){
    this.props.removeItem(_val);
  }
  
  
  render(){
    return(
      <ul>
		{this.props.items.map((item, index) => <TodoChild getItemIndex={this.handleRemove.bind(this)} item={item} index={index} key={index} />)}
	  </ul>
    )
  }
}

class TodoAdd extends React.Component {
  constructor(props){
  	super(props);
    
    this.state = {
      item: ""
    }
  }
  
  handleSubmit(e){
  	e.preventDefault();
    
    this.props.submitForm(this.state.item);
    this.setState({
      item: ""
    })
  }
  
  handleChange(e){
  	e.preventDefault();
    
    let item = e.target.value;
    
    this.setState({item})
  }
  
  render(){
    return(
      <form onSubmit={ this.handleSubmit.bind(this) }>
        <input type="text" onChange={ this.handleChange.bind(this) } value={this.state.item} />
        <button type="submit">Add</button>
      </form>
    )
  }
}




class Todo extends React.Component {
  
  constructor(){
    this.state = {
      todos:[]
    }
  }
  
  
  handleSubmit(_val){
    
    this.setState({
      todos:this.state.todos.concat([_val])
    })
    
  }
  
  handleRemove(_val){
    
    let res = this.state.todos;
    this.state.todos.splice(_val, 1)
   
    this.setState({
    	todos:this.state.todos
    })
    
  }
  
  render(){
    return(
      <div>
        <p>hellow world this is test todo...</p>

        <TodoLists items={this.state.todos} removeItem={this.handleRemove.bind(this)} />
        <TodoAdd submitForm={ this.handleSubmit.bind(this) } />
        
      </div>
    )
  }
}


ReactDOM.render(<Todo />, document.querySelector(".js-react-output"));