React: cannot read property of undefined when passing in my onClick function

Question

I am not sure why I am getting "TypeError: Cannot read property 'handleClickSimilar' of undefined" error when trying to use my function when mapping the array.

     handleClickSimilar = (d) => {
        console.log("testing click") 
    }


 render() {
      (...rest of my component)  
      <div className="bottom-content-right">
        <h3>Participating countries:</h3>
        {otherCountries && otherCountries.map(function(d, idx){
          return (<div onClick={() => this.handleClickSimilar(d)} key={idx}>{d}</div>)
        })}
      </div>

Answer 1

You need to make otherCountries.map function an arrow function (ie (d, idx) => ).

Replace otherCountries.map(function(d, idx){ with otherCountries.map((d, idx) =>{

So it will be like

{otherCountries && otherCountries.map((d, idx) => {
  return (<div onClick={() => this.handleClickSimilar(d)} key={idx}>{d}</div>)
})}