redux-devtools/packages/redux-devtools-slider-monitor/examples/todomvc/components/TodoItem.tsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import TodoTextInput from './TodoTextInput';
import { Todo } from '../reducers/todos';

interface State {
  editing: boolean;
}

interface Props {
  todo: Todo;
  addTodo: (text: string) => void;
  deleteTodo: (id: number) => void;
  editTodo: (id: number, text: string) => void;
  markTodo: (id: number) => void;
  markAll: () => void;
  clearMarked: () => void;
}

export default class TodoItem extends Component<Props, State> {
  static propTypes = {
    todo: PropTypes.object.isRequired,
    editTodo: PropTypes.func.isRequired,
    deleteTodo: PropTypes.func.isRequired,
    markTodo: PropTypes.func.isRequired,
  };

  state: State = {
    editing: false,
  };

  handleDoubleClick = () => {
    this.setState({ editing: true });
  };

  handleSave = (id: number, text: string) => {
    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 = (
        <TodoTextInput
          text={todo.text}
          editing={this.state.editing}
          onSave={(text) => this.handleSave(todo.id, text)}
        />
      );
    } else {
      element = (
        <div className="view">
          <input
            className="toggle"
            type="checkbox"
            checked={todo.marked}
            onChange={() => markTodo(todo.id)}
          />
          <label htmlFor="text" onDoubleClick={this.handleDoubleClick}>
            {todo.text}
          </label>
          <button className="destroy" onClick={() => deleteTodo(todo.id)} />
        </div>
      );
    }

    return (
      <li
        className={classnames({
          completed: todo.marked,
          editing: this.state.editing,
        })}
      >
        {element}
      </li>
    );
  }
}