Contrived interactive component example

backbone.js

(function (window, $, Backbone, app, _) {
  app.TodoItem = Backbone.View.extend({
    tagName: "li",
    template: _.template(
      '<div class="view">' +
				'<input class="toggle" type="checkbox" <%= completed ? "checked" : "" %>>' +
				'<label><%- title %></label>' +
				'<button class="destroy"></button>' +
			'</div>' +
			'<input class="edit" value="<%- title %>"></input>' 
    ),
    events: {
      "click .toggle": "toggleDone",
      "dblclick .view": "edit",
      "click a.destroy": "clear",
      "keypress .edit": "updateOnEnter",
      "blur .edit": "close",
    },
  
    initialize: function () {
      this.listenTo(this.model, "change", this.render);
      this.listenTo(this.model, "destroy", this.remove);
    },
  
    render: function () {
      this.$el.html(this.template(this.model.toJSON()));
      this.$el.toggleClass("done", this.model.get("done"));
      this.input = this.$(".edit");
      return this;
    },
  
    toggleDone: function () {
      this.model.toggle();
    },
  
    edit: function () {
      this.$el.addClass("editing");
      this.input.focus();
    },
  
    close: function () {
      var value = this.input.val();
      if (!value) {
        this.clear();
      } else {
        this.model.save({ title: value });
        this.$el.removeClass("editing");
      }
    },
  
    updateOnEnter: function (e) {
      if (e.keyCode == 13) this.close();
    },
  
    clear: function () {
      this.model.destroy();
    },
  });
})(window, jQuery, Backbone, app, _);

react.js

import { memo, useCallback, useState } from "react";

export const TodoItem = memo(function TodoItem({ title, complete, update, destroy }) {
  const [editing, setEditing] = useState(false);

  const save = useCallback(
    (e) => {
      const [{ value }] = e.target.elements;
      update({ value });
      setEditing(false);
    },
    [update, setEditing]
  );

  const toggle = useCallback(() => update({ complete: !complete }), [update, complete]);

  const open = useCallback(() => setEditing(true), [setEditing]);

  if (editing) {
    return (
      <form onSubmit={save} onBlur={save}>
        <input defaultValue={title} />
        <button>save</button>
      </form>
    );
  }

  return (
    <li onDoubleClick={open}>
      <input type="checkbox" checked={complete} onChange={toggle} />
      <label>{title}</label>
      <button onClick={destroy}>x</button>
    </li>
  );
});