0

I know there are tons of similar topics but I was not able to fix my problem.

I am getting this error for my mapDispatchToProps:

TypeError: Object(...) is not a function

This is my component: component/AddQuestions.js:

import React from "react";
import QuestionList from "./QuestionList";
import PropTypes from "prop-types";

const AddQuestions2 = ({ questions, addQuestion }) => {
  let newQuestion;

  function handleAdd(e) {
    e.preventDefault();
    console.log(newQuestion);
    addQuestion(newQuestion);
  }

  function handleChange(e) {
    newQuestion = e.target.value;
  }

  return (
    <div>
      <h2>Questions</h2>
      <QuestionList questions={questions} />
      <form onSubmit={handleAdd}>
        <label htmlFor="new-question">Enter new Question:</label>
        <input id="new-question" onChange={handleChange} value={newQuestion} />
        <button>Add Question #</button>
      </form>
    </div>
  );
};

AddQuestions2.propTypes = {
  questions: PropTypes.array.isRequired,
  addQuestion: PropTypes.func.isRequired
};

export default AddQuestions2;

This is my container: container/AddQuestions.js:

import { connect } from "react-redux";
import AddQuestion from "../components/AddQuestions";
import { addQuestion } from "../redux/actions";

const mapStateToProps = state => ({
  questions: ["test1", "test2"]
});

const mapDispatchToProps = dispatch => ({
  addQuestion: question => dispatch(addQuestion(question))
});

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

The action I want to connect: reducers/index.js:

export const addQuestion = question => ({
    type: "ADD_QUESTION",
    question
})

I am using this versions:

"react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.16",
"react-dom": "^16.12.0",
"react-redux": "^7.2.0",
"react-scripts": "3.4.0",
"redux-thunk": "^2.3.0",
"redux": "^4.0.5",

I tried to follow the setup of the official redux repo on Github, but yes they are using a different redux version:

https://github.com/reduxjs/redux/tree/master/examples/todos/

Error message in console:

react-dom.development.js:327 Uncaught TypeError: Object(...) is not a function
    at addQuestion (AddQuestions.js:10)
    at handleAdd (AddQuestions.jsx:53)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)
    at executeDispatchesAndRelease (react-dom.development.js:3278)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
    at forEachAccumulated (react-dom.development.js:3259)
    at runEventsInBatch (react-dom.development.js:3304)
    at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
    at handleTopLevel (react-dom.development.js:3558)
    at batchedEventUpdates$1 (react-dom.development.js:21871)
    at batchedEventUpdates (react-dom.development.js:795)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
    at attemptToDispatchEvent (react-dom.development.js:4267)
    at dispatchEvent (react-dom.development.js:4189)
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$1 (react-dom.development.js:11039)
    at discreteUpdates$1 (react-dom.development.js:21887)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)

Additional information:

CreateQuestion.js:

import React from "react";
import AddDetails from "./AddDetails";
import AddQuestion from "../containers/AddQuestions";
import QuestionList from "./QuestionList";

class CreateQuestion extends React.Component {
  render() {
    return (
      <div>
        <AddDetails />
        <AddQuestion />
      </div>
    );
  }
}

export default CreateQuestion;

App.js:

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import CreateQuestion from "./components/CreateQuestion";

function App() {
  return <CreateQuestion />;
}

export default App;

index.js:

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import configureStore from "./redux/configureStore";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();

QuestionList.jsx

import React from "react";

class QuestionList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.questions.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    );
  }
}

export default QuestionList;
10
  • Try to install redux as a dependency. Commented Mar 30, 2020 at 14:14
  • thanks, I just did and updated my question. But still get the same error. Commented Mar 30, 2020 at 14:17
  • Can you add here the error that you are getting in your console? Commented Mar 30, 2020 at 14:28
  • thanks, yes I added it just now Commented Mar 30, 2020 at 14:41
  • @PaFi can you also show us how you are importing AddQuestion and where are you using it? Commented Mar 30, 2020 at 14:42

1 Answer 1

1

You can try to use mapDispatchToProps like below

const mapDispatchToProps = {
  addQuestion,
};

It have to wrap you callback in dispatch automatically.

Also you can try to log you addQuestion function before pass it to mapDispatchToProps. Does it work or not? What does it print? If it's undefined, then you imported it wrong.

import { addQuestion } from "../redux/actions";
console.log(addQuestion); // undefined?
Sign up to request clarification or add additional context in comments.

9 Comments

yes indeed its prints undefined, do I maybe have to initialise the action? or how do I import it correctly, in the linked github repo it seems they are doing it the same why but using a todo.spec.js file
@PaFi Is addQuestion action located in redux/actions/index.js or redux/actions.js?
@PaFi if not there is a problem
@PaFi Try to import actions from "../redux/actions" and log it: console.log(actions). What do you see?
@PaFi no problems :)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.