Ошибка при использовании карты

Question

Я использую карту в своем компоненте реакции для перебора по списку. Он отлично работает, когда у меня есть одна ссылка внутри цикла карты, но моя вторая ссылка возвращает ошибку, когда я пытаюсь создать для нее оптимизированную сборку. Intellij дает мне сообщение об ошибке после моего <a it expects either a ',' or a ')'. Я не вижу, что я пропустил скобок или что-то еще.

{this.state.players.map(singlePlayer => 
     <Link to={'edit-player/' + singlePlayer.id}><li key={singlePlayer.id}>{singlePlayer.name}</li></Link> 
     <a id={singlePlayer.id} onClick={this.handleDelete.bind(this)}>delete</a> 
            )} 

Answer 1

map должен возвращать только один элемент. Так что ваш код должен быть

{this.state.players.map(singlePlayer => 
    <div><Link to={'edit-player/' + singlePlayer.id}><li key={singlePlayer.id}>{singlePlayer.name}</li></Link> 
    <a id={singlePlayer.id} onClick={this.handleDelete.bind(this)}>delete</a></div> 
           )} 

Answer 2

Issue, вы возвращаете более одного элемента внутри map, вы не можете вернуть более одного элемента, так что вам нужно обернуть Link и a либо div или li или любым другим элементом. попробуйте следующее:

{this.state.players.map(singlePlayer => 
    <div> 
     <Link to={'edit-player/' + singlePlayer.id}><li key={singlePlayer.id}>{singlePlayer.name}</li></Link> 
     <a id={singlePlayer.id} onClick={this.handleDelete.bind(this)}>delete</a> 
    </div> 
)}