import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import TodoTextInput from './TodoTextInput'; export default class TodoItem extends Component { static propTypes = { todo: PropTypes.object.isRequired, editTodo: PropTypes.func.isRequired, deleteTodo: PropTypes.func.isRequired, markTodo: PropTypes.func.isRequired }; constructor(props, context) { super(props, context); this.state = { editing: false }; } handleDoubleClick = () => { this.setState({ editing: true }); } handleSave = (id, text) => { if (text.length === 0) { this.props.deleteTodo(id); } else { this.props.editTodo(id, text); } this.setState({ editing: false }); } render() { const { todo, markTodo, deleteTodo } = this.props; let element; if (this.state.editing) { element = ( this.handleSave(todo.id, text)} /> ); } else { element = (
markTodo(todo.id)} />
); } return (
  • {element}
  • ); } }