Card.ts

Card.ts

const Card = ({ getId, index, id, data, onSetTitle }) => {
  const card = data[id];
  const [editing, setEditing] = useState();
  const [cardTitle, setCardTitle] = useState(card.title);
  return (
    <div className="card">
      {editing ? (
        <form
          onSubmit={e => {
            e.preventDefault();
            onSetTitle(id, cardTitle);
            setEditing(false);
          }}
        >
          <input
            autoFocus
            value={cardTitle}
            onChange={e => setCardTitle(e.target.value)}
            placeholder="card title"
          />
        </form>
      ) : (
        <div
          onDoubleClick={e => {
            setCardTitle(card.title);
            setEditing(true);
          }}
          className="card-title"
        >
          {card.title || "No title"}{" "}
          <a href={`/?board=${id}`} target="_blank" className="card-link">
            #
          </a>
        </div>
      )}
    </div>
  );
};