1.js

const TodoListComponent = ({todos}) => (
  <ul>
    {todos.map((todo, i) => <li key={i}>{todo}</li>)}
  </ul>
)

const AddTodoFormContainer = React.createClass({
	getInitialState() {
  	return {
    	todo: ''
    }
  },
  onSubmit(e) {
  	e.preventDefault()
    this.props.onSubmit(this.state.todo)
    this.setState({
    	todo: ''
    })
  },
  onChange(e) {
  	this.setState({
     todo: e.target.value
    })
  },
	render() {
  	return (
    	<form onSubmit={this.onSubmit}>
      	<input value={this.state.todo} onChange={this.onChange}/>
        <button>Submit</button>
      </form>
    )
  }
})

const TodoAppContainer = React.createClass({
	getInitialState() {
  	return {
    	todos: ['Learn React']
    }
  },
  addTodo(todo) {
  	this.setState({
    	todos: this.state.todos.concat([todo])
    })
  },
  
	render() {
  	return (
    	<div>
        <h1>Container Test</h1>
        <TodoListComponent todos={this.state.todos} />
        <AddTodoFormContainer onSubmit={this.addTodo}/>
      </div>)
  }
})

ReactDOM.render(
	<TodoAppContainer />,
  document.getElementById('root')
)

2.js

const TodoListComponent = ({todos}) => (
  <ul>
    {todos.map((todo, i) => <li key={i}>{todo}</li>)}
  </ul>
)

const AddTodoFormContainer = ({onSubmit}) => {
	let input
	return (
  	<form onSubmit={e => {
    	e.preventDefault()
      onSubmit(input.value)
      input.value = ''
    }}>
    	<input ref={node => input = node} />
      <button type="submit">Add</button>
    </form>
  )
}

const TodoAppContainer = React.createClass({
	getInitialState() {
  	return {
    	todos: ['Learn React']
    }
  },
  addTodo(todo) {
  	this.setState({
    	todos: this.state.todos.concat([todo])
    })
  },
	render() {
  	return (
    	<div>
        <h1>Todo</h1>
        <TodoListComponent todos={this.state.todos} />
        <AddTodoFormContainer onSubmit={this.addTodo}/>
      </div>
    )
  }
})

ReactDOM.render(
	<TodoAppContainer />,
  document.getElementById('root')
)