React Redux returning array of objects, array mapping them and trying to pass function as props but getting promise error

Question

I'm getting data from my redux thunk and connecting it to my parent component

function mapStateToProps (state) {
  return {
   data: state.myarticles.data
  }
}
export default connect(mapStateToProps, actions)(MyArticlesView)

In the very same component I have this

{this.props.data && this.props.data.results && 
this.props.data.results.map(this.renderArticles)}

which fires function that lists all components from that array

renderArticles (article, i) {
return (
  <Article key={i} title={article.title} status={article.status} updated={article.updated_at} id={article.id} />
)

}

but I also want to add to that Article component a onDelete props with a function name from my parent component so it would look like this

renderArticles (article, i) {
return (
  <Article key={i} title={article.title} status={article.status} updated={article.updated_at} id={article.id} onDelete={this.handleDeleteClick} />
)

}

but it throws me an error

Uncaught (in promise) TypeError: Cannot read property 'handleDeleteClick' of undefined

I know that in that map function this.handleDeleteClick is not visible but have no idea how to pass it to that child components

thanks

Answer 1

You need to bind this that refers to React component's instance NOT the function to the map function, to be as follow:

this.props.data.results.map(this.renderArticles.bind(this))}