0

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

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?

5
  • 1
    Which file are you rendering when rendering the Presentational component - component1.js or container1.js Commented Jan 1, 2020 at 14:55
  • @VictorF component1.js Commented Jan 1, 2020 at 15:03
  • 1
    That's the problem, because component1 is not exported with the Redux props. You have to use container1.js or move the Redux props into component1 Commented Jan 1, 2020 at 15:04
  • @VictorF Thank you so much :) That solved the issue :) Commented Jan 1, 2020 at 15:10
  • I'm glad it worked :). Please accept my answer so future readers can see what worked. Commented Jan 1, 2020 at 15:11

1 Answer 1

1

You have to use the container1.js file instead of the component1.js file, because the component1 doesn't have the Redux props, but the container1 does.

So, you should either change your imports to use the container1 file or put the Redux prop mapping into the component1.js file

Sign up to request clarification or add additional context in comments.

Comments

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.