React Redux: Works Perfect with Sample A Code but returns dispatch error with sample B Code

Question

Am trying to display Post records and then send/post back the records to server backend via onclick function.

To this effect, I have created two samples of Codes A & B.

Sample A codes works perfects but sample B Code works partly.

In sample code A below. Everything works fine as expected as I can display records and post back to server backend.

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { Actions } from '../_actions';


class App extends React.Component {
constructor(props) {
        super(props);
        this.state = {};
      }

    componentDidMount() {
this.props.dispatch(userActions.getRec());

    }



handlePostId(postid,post_content){
//return  (e) => this.props.dispatch(Actions.sendData(postid,post_content));
return  this.props.dispatch(Actions.sendData(postid,post_content));

}




    render() {
  const { post1, posts1} = this.props;
        return (
            <div>       
   {posts1.items1 &&
                    <ul>
                        {posts1.items1.map((post1, index1) =>
                            <li key={post1.id}>


 {post1.content} ({post1.id})
<input type="button" value="Send Data Working" onClick={() => this.handlePostId(post1.id, 55)}  />



                            </li>
                        )}


                    </ul>
}

            </div>



        );
    }
}


function mapStateToProps(state) {
const { posts1, post1} = state;
    return {
        post1,
        posts1,


    };
}


const connectedApp = connect(mapStateToProps)(App);
export { connectedApp as App }

Sample B Code

Here is my requirements and my issue with Sample Code B.

I have a requirements to create a Props and have records returns in it as per code below

const RenderPost = (props) => {
return (<React.Fragment><li >
          {props.post1.id} - {props.post1.content}

 <input type="button" value="Send Data not Working"  onClick={() => props.handlePostId(props.post1.id, 55)}  />
        </li>


        </React.Fragment>
        );
};

In the Map function, I rendered Post records as follows

<RenderPost post1={post1} key={i} handlePostId={this.handlePostId} />

Sample B partly works as it displays record very well but my issue is that If I click on Send Data button so as to post records to server backend, it will display error

Cannot read property 'dispatch' of undefined
    at Object.handlePostId (bundle.js:73753)

    at onClick.

Is props conflicting or what?.

Here is sample B code

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { Actions } from '../_actions';



const RenderPost = (props) => {
return (<React.Fragment><li >
          {props.post1.id} - {props.post1.content}

 <input type="button" value="Send Data not Working"  onClick={() => props.handlePostId(props.post1.id, 55)}  />
        </li>


        </React.Fragment>
        );
};

class App extends React.Component {
constructor(props) {
        super(props);

  this.state = {};  

    }

    componentDidMount() {
this.props.dispatch(Actions.getRec());
    }



handlePostId(postid,post_content) {
//return (e) => this.props.dispatch(Actions.sendData(postid,post_content));
return  this.props.dispatch(Actions.sendData(postid,post_content));
    }



    render() {
  const { post1, posts1} = this.props;
        return (
            <div>
   {posts1.items1 &&

                    <ul>
                        {posts1.items1.map((post1, i) =>
 <RenderPost post1={post1} key={i} handlePostId={this.handlePostId} />


                        )}


                    </ul>

                }

            </div>

        );
    }
}


function mapStateToProps(state) {
const { posts1, post1} = state;
    return {
        post1,
        posts1,


    };
}


const connectedApp = connect(mapStateToProps)(App);
export { connectedApp as App };

handlePostId is used as a callback but it's not bound to correct context. — Estus Flask, Jan 08 '19 at 08:48
Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Estus Flask, Jan 08 '19 at 08:49

score 0 · Accepted Answer · answered Jan 08 '19 at 09:14

0

You have to bind the handlePostId function to the component

<RenderPost post1={post1} key={i} handlePostId={this.handlePostId.bind(this)} />

answered Jan 08 '19 at 09:14

Amila Dulanjana

1,884
1
16
33

Thanks Amila. Your solution really help me alot – jmarkatti Jan 08 '19 at 09:44

score 0 · Answer 2 · answered Jan 08 '19 at 10:14

Looks like you didn't bind handlePostId in your constructor.

Alternatively, you could do this without needing to bind.

handlePostId = (postId, postContent) => {
    return this.props.dispatch(Actions.sendData(postId, postContent));
}

Then call it like you did before:

<RenderPost post1={post1} key={i} handlePostId={this.handlePostId} />

React Redux: Works Perfect with Sample A Code but returns dispatch error with sample B Code

2 Answers2