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;
reduxas a dependency.