Javascript Question
Calling a function in React: Uncaught TypeError: ...is not a function(…)
I'm trying to add a User, and for now I am just trying to the calls to work, so there is no data being passed so far. Mycontainer looks like this:
user-add.js
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {createUser} from '../actions/index'
class UserCreate extends Component {
render() {
return (
<div>
<h2> Add User </h2>
<table className="userTable">
<tbody>
<tr>
<td>First Name:</td>
<td>Last Name:</td>
</tr>
<tr>
<td>
<input type="text"
placeholder="Hello!"
value="Val" />
</td>
<td>
<input type="text"
placeholder="Hello!"
value="Val" />
</td>
</tr>
</tbody>
</table>
<button onClick={() =>this.props.createUser()}>Submit</button>
</div>
);
}
}
function mapStateToProps(state) {
return {
user: state.activeUser
};
}
function matchDispatchToProps(dispatch){
return bindActionCreators({createUser: createUser}, dispatch);
}
export default connect(mapStateToProps)(UserCreate);
In the reducer for my users, I have added the corresponding case to my switch statement:
switch (action.type) {
case 'USER_DELETED':
return state.filter(user => user.id !== action.userIdToDelete);
case 'USER_CREATED':
return state;
}
and of course I have also added the action to my actioncreators like so
export const createUser = () => {
console.log("You created user: XX ");
return {
type: 'USER_CREATED',
payload: {}
}
};
However, it gives me:
Uncaught TypeError: _this2.props.createUser is not a function(…)
Any ideas? I am very new to this, have posted here a few times already (other questions though), but I am not really understanding what's wrong.If you need any other code snippets, let me know and I'll post them. I know that the code posted is incomplete, just bear in mind that I just want the button to call the function etc., the actual creation of a user is another problem for now.
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
You are not using matchDispatchToProps (which should be mapDispatchtoProps?) anywhere.
You need to add it to your connect:
export default connect(mapStateToProps, mapDispatchToProps)(UserCreate);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download