TypeError: Cannot read property 'props' of undefined

Question

I tried to add redux to my todo app coded in react. At the beginning it was easy, I set up the edition, the listing and all the stuff for CRUD app. But one action is missing the removing. I set up the removing method in the action js file for redux but when I want to call the removing action like I did before for the edition with this.props.deleteTodo, I get this error:

class TodosList extends Component {
  constructor() {
    super();
    this.state = { todos: [] };
  }

  componentDidMount() {
    //TODO Give this action to todoAction
    axios
      .get("/todos")
      .then(response => {
        this.setState({ todos: response.data });
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  todoList() {
    return this.state.todos.map(function(currentTodo, i) {
      return (
        <tr key={i}>
          <td className={currentTodo.todo_completed ? "completed" : ""}>
            {currentTodo.todo_description}
          </td>
          <td className={currentTodo.todo_completed ? "completed" : ""}>
            {currentTodo.todo_responsible}
          </td>
          <td className={currentTodo.todo_completed ? "completed" : ""}>
            {currentTodo.todo_priority}
          </td>
          <td>
            <Link to={"/edit/" + currentTodo._id}>Editer</Link>
            <button
              className="btn btn-primary"
              // I can't read this.props here to get the method
              // dispatched
              onClick={this.props.deleteTodo(currentTodo._id)}
            >
              Supprimer
            </button>
          </td>
        </tr>
      );
    });
  }
  render() {
    return (
      <div>
        <h3>Todos List</h3>
        <table className="table table-striped" style={{ marginTop: 20 }}>
          <thead>
            <tr>
              <th>Description</th>
              <th>Responsible</th>
              <th>Priority</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>{this.todoList()}</tbody>
        </table>
      </div>
    );
  }
}
TodosList.propTypes = {
  deleteTodo: PropTypes.func.isRequired,
  errors: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  errors: state.errors
});

export default connect(
  mapStateToProps,
  { deleteTodo }
)(TodosList);

TypeError: Cannot read property 'props' of undefined

Answer 1

deleteTodo is not a prop passed to TodosList component.

So remove it in propTypes.

You can have:

import { deleteTodo } from './actionCreators' // deleteTodo from actionCreator
                                              // not passed s prop

class TodosList extends Component {

  handleClick = (event) => {
    this.props.deleteTodo(currentTodo._id)
  }

  todoList() {
    return this.state.todos.map((currentTodo, i) => ( // arrow function
       <tr key={i}>
          <td>
            <button
              onClick={handleClick} // pass arrow function
            />
          </td>
      </tr>
    ))
  }

  render() { ... }
}

connect(mapStateToProps, { deleteTodo })(TodosList)