I'm following this React tutorial here: https://ibaslogic.com/how-to-edit-todos-items-in-react/ to build a simple TO DO app.

I've also reviewed Why onDoubleClick event is not working in React.js? but there's no onclick event to worry about in my example.

My onDoubleClick event should call a function handleEditing but nothing happens when I double click a list item.

I'm unsure of why it does not work (the web browser does not seem to register a double click event.

Below is my example:

import React from "react";
import styles from "./TodoItem.module.css";

class TodoItem extends React.Component {
  state = {
    editing: false,
  };

  handleEditing = () => {
      console.log("doubleClick")
    this.setState({
      editing: true,
    });
  };

  render() {

    const completedStyle = {
      fontStyle: "italic",
      color: "#595959",
      opacity: 0.4,
      textDecoration: "line-through",
    };
    
    const { completed, id, title } = this.props.todo;
    
    let viewMode = {}
let editMode = {}

if (this.state.editing) {
  viewMode.display = "none"
} else {
  editMode.display = "none"
}
    
    return (
      <li className={styles.item}>
        <div onDoubleClick={this.handleEditing} style={viewMode}>
          <input
            type="checkbox"
            className={styles.checkbox}
            checked={completed}
            onChange={() => this.props.handleChangeProps(id)}
          />
          <button onClick={() => this.props.deleteTodoProps(id)}>Delete</button>
          <span style={completed ? completedStyle : null}>{title}</span>
        
        </div>
        <input type="text" style={editMode} className={styles.textInput} />
      </li>
    );
  }
}

export default TodoItem;

I don't think this is relevant, but here is my css:

.item {
    font-size: 1.2rem;
    list-style-type: none;
    padding: 17px 0px;
    border-bottom: 1px solid #eaeaea;
  }
  
  .checkbox {
    margin-right: 15px;
  }
  
  .item button {
    font-size: 13px;
    background: #f1f3f4;
    border: none;
    cursor: pointer;
    float: right;
    outline: none;
    border-radius: 100px;
    height: 50px;
    width: 50px;
    margin: -10px 0 0 10px;
  }


  .textInput {
    width: 100%;
    padding: 10px;
    border: 1px solid #dfdfdf;
  }