CODEWITHSUNDEEP
javascriptreactjsredux
AG_HIHI
AG_HIHI

Reputation: 1995

React Redux : Problem with passing props and dispatch from container to component

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?

Upvotes: 0

Views: 185

Answers (1)

user9572013
user9572013

Reputation:

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

Upvotes: 1

Related Questions