this.props is not a function with redux connect - reactjs

Question

I am getting the error that this.props.onAddTrip on components/NewTrip.jsx is not a function and I have been debugging this for a few days. Any help is appreciated! I have included the code to my NewTrip component, addTrip container and my redux action.
components/NewTrip.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class NewTrip extends React.Component {
constructor(props) {
super(props)
this.state = {
location: '',
start: '',
end: ''
}
this.handleInputChange = this.handleInputChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
this.handleReset = this.handleReset.bind(this)
}
handleInputChange(e){
this.setState({
[e.target.name]: e.target.value
});
};
handleSubmit(e) {
e.preventDefault();
if(this.state.location.trim() && this.state.start.trim() &&
this.state.end.trim()) {
this.props.onAddTrip(this.state);
this.handleReset();
}
};
handleReset(){
this.setState({
location: '',
start: '',
end: ''
});
};
render() {
return (
<div className="container">
<form className="add_trip" onSubmit={ this.handleSubmit }>
<input name="location" className="start_form" type="text" autocomplete="off" placeholder=" Location" onChange={ this.handleInputChange } value={ this.state.location }/>
<input name="start" type="date" onChange={ this.handleInputChange } value={ this.state.start }/>
<input name="end" type="date" onChange={ this.handleInputChange } value={ this.state.end }/>
<input className="end_form" type="submit" value="Add" />
</form>
</div>
)
}
}
export default NewTrip;
containers/addTrip.js
import React from 'react';
import { connect } from 'react-redux';
import { addTrip } from '../actions';
import NewTrip from '../components/NewTrip.jsx';
const mapDispatchToProps = dispatch => {
return {
onAddTrip: trip => {
dispatch(addTrip(trip));
}
};
};
export default connect(
null,
mapDispatchToProps
)(NewTrip);
actions/index.js
import axios from 'axios';
export const addTrip = ( {location, start, end} ) => {
return (dispatch) => {
return axios.post('/api/trips', { location, start, end})
.then(response => {
dispatch(addTripSuccess(response.data))
})
.catch(error => {
throw(error)
})
}
}
export const addTripSuccess = data => {
return {
type: 'ADD_TRIP',
payload: {
// id: data.row.split(",")[0].substring(1),
id: data._id,
location: data.location,
start: data.start,
end: data.end
}
}
}

Answer 1

I'm a little confused about the purpose of the addTrip.js. If you move the logic in that file into your NewTrip component, your function should be defined.
import React from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux'
import { addTrip } from '../actions'
class NewTrip extends React.Component {
constructor(props) {
super(props)
this.state = {
location: '',
start: '',
end: ''
}
this.handleInputChange = this.handleInputChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
this.handleReset = this.handleReset.bind(this)
}
handleInputChange(e){
this.setState({
[e.target.name]: e.target.value
});
};
handleSubmit(e) {
e.preventDefault();
if(this.state.location.trim() && this.state.start.trim() &&
this.state.end.trim()) {
this.props.addTrip(this.state);
this.handleReset();
}
};
handleReset(){
this.setState({
location: '',
start: '',
end: ''
});
};
render() {
return (
<div className="container">
<form className="add_trip" onSubmit={ this.handleSubmit }>
<input name="location" className="start_form" type="text" autocomplete="off" placeholder=" Location" onChange={ this.handleInputChange } value={ this.state.location }/>
<input name="start" type="date" onChange={ this.handleInputChange } value={ this.state.start }/>
<input name="end" type="date" onChange={ this.handleInputChange } value={ this.state.end }/>
<input className="end_form" type="submit" value="Add" />
</form>
</div>
)
}
}
export default connect(null, { addTrip })(NewTrip);
Give that a try. Also changed this.props.onAddTrip to this.props.addTrip (in handleSubmit) since thats the name of your imported function.