React OnClick fun is udefined?

Question

[IDONTSUDO]

У меня есть вот такой State. И мне приходится, его рендерить через map и 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)
}

Ошибка которая у меня выходит.

TypeError: Cannot read property 'handleClick' of undefined

В чем может быть проблема?

Answer 1

[Дмитрий]

Object.keys(manage.UserBy).map(function(key) {

замените на стрелочную функцию, так как у обычных функций свой this, от личный от контекста, в котором они вызываются, потому и не работает.

Object.keys(manage.UserBy).map(key => {

PS Но по хорошему весь кусок я бы переписал так:

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

Comments

[IDONTSUDO]

ты лучший, спасибо!

[Дмитрий]

IDONTSUDO, Я еще улучшился, почитайте PS

[IDONTSUDO]

Дмитрий,

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

Переписал, получилось вот так.