You seem to be facing a communication issue between parent and child components. The recommended approach is "props down, events up", which helps in understanding how and when a variable changes within a component without affecting the behavior of its child components.
In your scenario, the unselectedPlayerList is a prop in the child component passed from its parent. This means that the parent component owns the data and controls the value of this prop. If the child component needs to modify this value, it should emit an event to instruct the parent component on what to do.
Here is an example of handling this in the parent and child components:
ParentComponent code:
export default class ParentComponent extends LightningElement {
unselectedPlayerList = []
handleSelectPlayer (event) {
const playerName = event.detail.playerName
const playerIndex = this.unselectedPlayerList.findIndex(player => player.Name === playerName)
const shallowPlayerList = [ ...this.unselectedPlayerList ]
shallowPlayerList.splice(playerIndex, 1)
this.unselectedPlayerList = shallowPlayerList
}
}
Template code:
<c-child-component
unselected-player-list={unselectedPlayerList}
onselectplayer={handlePlayerSelect}
></c-child-component>
ChildComponent code:
export default class ChildComponent extends LightningElement {
@api unselectedPlayerList = []
handleSelectPlayer (event) {
this.dispatchEvent(
new CustomEvent('selectplayer', {
detail: {
playerName: event.target.title,
}
})
)
}
}
If you prefer, there is another way to write the parent component using the @track decorator. However, this might impact performance as every modification to the array could trigger a view update.
Feel free to explore these resources for more information: