React OnClick fun is udefined?

Question

React

I have such a State. And I have to render it through map and Object.keys.

<button onClick={this.handleClick} >Удалить</button> //отлично работает
                {manageList.map((manage, i) =>( 
                    <>
                     <div>
                    {Object.keys(manage.UserBy).map(function(key) {
                  
                      if(key == "id"){
                        return  <button onClick={this.handleClick} >Удалить</button>  //не работает
                      }
                      return <> <div>{manage.UserBy[key]} {manage.price}%</div> </>
                      })}
                     </div>
                    </>))}

//функция 
handleClick(){
    console.log(200)
}

The error that I'm getting.

TypeError: Cannot read property 'handleClick' of undefined

What could be the problem?

Answer 1

Object.keys(manage.UserBy).map(function(key) {
replace it with an arrow function, since ordinary functions have their own this, which is different from the context in which they are called, and therefore does not work. PS But for good, I would rewrite the whole piece like this:

{Object.entries(manage.UserBy).map(([key, value]) => 
  key == "id" 
   ? <button onClick={this.handleClick} >Удалить</button>  
   : <div>{`${value} ${manage.price}%`}</div> 
)}