4

I'm doing a ToDo list using react and redux, and I'm facing a problem: When I first click in a ToDo item to toggle it to completed it works successfully, but after that, the onClick always fire twice, I've already faced a problem like that while I used only InfernoJS to make this application, but solved it by binding the toggleTodo method to the component on the constructor, but I don't know what to do now.

Component Code

import Inferno from "inferno";
import { connect } from "inferno-redux";
import * as actions from "./../actions/actions";
import Component from "inferno-component";
import moment from "moment";

export class Todo extends Component {
  render() {
    moment.locale("pt-br");
    var { id, text, completed, createdAt, completedAt, dispatch } = this.props;
    var todoClassName = completed ? "todo todo-completed" : "todo";
    var renderDate = () => {
      var message = "Criado em ";
      var timestamp = createdAt;
      if (completed) {
        message = "Completa em ";
        timestamp = completedAt;
      }
      return message + moment(timestamp).format("DD/MM/YYYY @ HH:mm:ss");
    };

    return (
      <div
        className={todoClassName}
        onClick={() => {
          dispatch(actions.toggleTodo(id));
        }}
      >
        <div>
          <input type="checkbox" checked={completed} />
        </div>
        <div>
          <p>{text}</p>
          <p className="todo__subtext">{renderDate()}</p>
        </div>
      </div>
    );
  }
}

export default connect()(Todo);
n1stre
  • 5,856
  • 4
  • 20
  • 41
  • 1
    I hit my head against this as well, and I believe this might be a bug. In my case, I was able to make the button it's own component, where I set `shouldComponentUpdate` to always return `false`. That won't work in your case, as your click handler is on the parent, but perhaps you could manually unbind the handler on unmount? – Nix Jul 09 '17 at 12:13

0 Answers0