gistfile1.txt

import React, { PropTypes } from 'react';
import EditableTodoContainer from '../containers/EditableTodoContainer';
import DefaultTodoContainer from '../containers/DefaultTodoContainer';

class TodoListItem extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            inputItemId: null
        }
    }

    reset(){
        this.setState({inputItemId: null});
    }

    // Workarounds
    // reset state if the seeded prop is updated
    componentWillReceiveProps(nextProps){
        if (nextProps.item.id !== this.props.item.id) {
            this.setState({ inputVal: nextProps.item.id })
        }
    }

    changeTodoItemViewHandler = ()=> {
        this.setState({inputItemId: this.props.item.id});
    };

    render(){
        const {item} = this.props;
        return (
            <li style={{
                textDecoration: item.isActive ?
                    'none' :
                    'line-through'
                }} onDoubleClick={this.changeTodoItemViewHandler.bind(this)}>
                { (item.id === this.state.inputItemId) ?
                    <EditableTodoContainer item={item} reset={this.reset.bind(this)}/> :
                    <div className="View">
                        <DefaultTodoContainer item={item}/>
                    </div>
                }
            </li>
        )
    }
}

export default TodoListItem;