How to access correct 'this' inside map: ReactJS [duplicate]

Answer 1

Issue is with this line:

{this.props.postComments.map( this.renderComment )}

Because you forgot to bind renderComment, map callback method, so this inside renderComment method will not refer to the class context.

Use any one of these solutions, it will work.

1- Use this line in constructor:

this.renderComment = this.renderComment.bind(this) ;

2- Pass this with with map like:

{this.props.postComments.map(this.renderComment, this)}

3- Use Arrow function with renderComment method, like this:

renderComment = (comment, i) => {
    .....

or use the map inside the renderComment function (i used to prefer this way), like this:

renderComment() {
    return this.props.postComments.map((comment, i) => {
        return(
            

                

                    {comment.user}
                    {comment.text}
                    
                        ×
                    
                
            
        )
    })
}

And call this method from render, in this case binding of renderComment is not required:

{this.renderComment()}