class Todo extends React.Component {

  constructor(){

    super()

    this.data = ['write book','wash clothes','jogging'];

  }

  render() {

    return (      

      <div>

        <ul>

         {this.data.map((item)=><TodoItem key={item} item={item}/>)}

        </ul>

      </div>

    ); 

  }

}

​

class TodoItem extends React.Component {

  constructor(){

    super()

    this.state = {

      text: '',

      isEditing: false

    };

    this.onClickEdit = this.onClickEdit.bind(this);

    this.onSaveEdit = this.onSaveEdit.bind(this);

    this.onTextChanged = this.onTextChanged.bind(this);

  }

  onClickEdit(){

    this.setState({isEditing: !this.state.isEditing});

  }

  onSaveEdit(){

    this.setState({

      text: this.state.text, 

      isEditing: false

    });

  }

  onTextChanged(e){

    this.setState({text: e.target.value});

  }

  render(){

    return(

      <li>

      {this.state.isEditing ? '' : <span>{this.props.item}</span>}

      {this.state.isEditing ? <span><input value={this.props.item} type="text" onChange={this.onTextChanged}/></span> :''}

        

      {this.state.isEditing ? '' : <button onClick={this.onClickEdit}>Edit</button>}

      <button onClick={this.onSaveEdit}>Save</button>

      </li>

    )

  }

}

​

React.render(

  <Todo/>,

  document.getElementById('react_example')

);