I have a simple WORKING React-redux application which I tried to better organize into different folders like this:

component1.js
import React from "react";
class Presentational extends React.Component {
constructor (props){
super(props);
this.state= {
input:''
}
this.handleChange= this.handleChange.bind(this)
this.submitMessage= this.submitMessage.bind(this)
}
handleChange (event) {
this.setState ({
input:event.target.value
})
}
submitMessage () {
this.props.submitNewMessage(this.state.input);
this.setState({
input:''
})
}
render(){
return (
<div>
<h2> Type a new Message </h2>
<input value={this.state.input} onChange={this.handleChange}/>
<br/>
<button onClick={this.submitMessage}>Submit</button>
<ul>
{this.props.messages.map((message,idx) =>{
return <li key={idx}>{message}</li>
})}
</ul>
</div>
)
}
}
export default Presentational;
container1.js
import { connect } from 'react-redux'
import { addMessage } from '../actions'
import Presentational from '../components'
const mapStateToProps = state => {
return {
messages: state
}
}
const mapDispatchToProps = dispatch => {
return {
submitNewMessage :message => {
dispatch(addMessage(message))
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Presentational)
While the app works in the original app where all of the react-redux code is in 1 file, after separating the logic of the file into different folders, the app crashes and gives these errors:
TypeError: Cannot read property 'map' of undefined
Uncaught TypeError: this.props.submitNewMessage is not a function
It seems to me that the container1.js code isn't successfully 'mapping state to props' and 'mapping dispatch to props' for the Presentational component in component1.js.
Any idea what I did wrong?
Presentationalcomponent -component1.jsorcontainer1.js