TypeError: _this2.props.taskAdded is not a function redux

Question

I'm trying to create a simple todo list app where you can type a name and a task into two inputs and create a list of tasks after hitting the add task button. I've been debugging this for hours and I can't figure out why taskAdded isn't getting detected! I have other code from a udemy course very similar to this that works fine, I'm not sure why this isn't working as well. Here's a couple snippets of code from my project. Anything would help! :)

AddTask.js

import React, { Component } from "react";

class AddTask extends Component {
  state = {
    name: "",
    task: ""
  };

  nameChanged = event => {
    this.setState({ name: event.target.value });
  };
  taskChanged = event => {
    this.setState({ task: event.target.value });
  };
  render() {
    return (
      <div className="AddTask">
        <input
          type="text"
          placeholder="Name"
          onChange={this.nameChanged}
          value={this.state.name}
        />
        <input
          type="text"
          placeholder="Task"
          onChange={this.taskChanged}
          value={this.state.task}
        />
        <button onClick={() => this.props.taskAdded(this.state.name, this.state.task)}>Add Task</button>
      </div>
    );
  }
}

export default AddTask;

Tasks.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

import Task from '../components/Task/Task';
import AddTask from '../components/AddTask/AddTask';
import * as actionTypes from '../store/actions';

class Tasks extends Component {

    render () {
        return (
            <div>
                <AddTask taskAdded={this.props.onAddedtask} />
                {this.props.tsk.map(task => (
                    <Task
                        key={task.id}
                        name={task.name} 
                        task={task.task} 
                        clicked={() => this.props.onRemovedTask(task.id)}/>
                ))}
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        tsk: state.tasks
    };
};

const mapDispatchToProps = dispatch => {
    return {
        onAddedTask: (name, task) => dispatch({type: actionTypes.ADD_TASK, taskData: {name:name, task: task}}),
        onRemovedTask: (id) => dispatch({type: actionTypes.REMOVE_TASK, taskId: id})
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Tasks);

I think you need to bind your actions. This question talks a little bit about that. https://stackoverflow.com/questions/41754489/when-would-bindactioncreators-be-used-in-react-redux — Wen W, Jun 23 '18 at 04:11
try `console.log(this.props.onAddedtask)` on `Tasks` Component `render` function and see if its a function. — Inus Saha, Jun 23 '18 at 04:55

score 0 · Accepted Answer · answered Jun 23 '18 at 05:58

0

You have a typo. onAddedTask needs a capital T in

<AddTask taskAdded={this.props.onAddedtask}

answered Jun 23 '18 at 05:58

Yossi

5,577
7
41
76

oh my gosh thank you! I can't believe the error was so small I was really pulling my hair out for that one. Thanks so much really helped to have fresh eyes on my code – ancheta98 Jun 23 '18 at 17:19

TypeError: _this2.props.taskAdded is not a function redux

1 Answers1