ReactJS - add delete buttons to items displayed with map() - reactjs

Question

I have this player, which uses map() to display all items, like so:
class Player extends Component{
constructor (props) {
super(props);
this.state = {
youtube_urls:[],
artists:[],
loadedVideosCount: 0,
currentPlayingIndex: -1,
};
};
render(){
const { select } = this.props
const { artists, youtube_urls, loadedVideosCount, currentPlayingIndex } = this.state;
return (
<div>
<div>
<h1 className="title is-1"><font color="#C86428">{ this.Capitalize(select) } playlist</font></h1>
<div className="Line" />
</div>
{
artists.map((artist, index) => {
return (
<table>
<tbody>
<div key={artist}>
<ul>
<li><strong><font color="#C86428">Artist: </font></strong><strong><font color="#6f4e37" size='2'>{ artist }</font></strong></li>
</ul>
</div>
<ReactPlayer
url={ audio }
controls
width='50'
height='150'
onLoaded={() =>
this.setState(currentState => ({
loadedVideosCount: loadedVideosCount + 1,
currentPlayingIndex:
loadedVideosCount + 1 === youtube_urls.length ? 0 : -1,
}))
}
onEnded={() =>
this.setState(currentState => ({
currentPlayingIndex: currentPlayingIndex + 1,
}))
}
playing={index === currentPlayingIndex}
/>
<div className="Line" />
</tbody>
</table>
)
})
}
</div>
)
}
}
Is there a simple way of adding a 'delete' button for each item as well?

Answer 1

I assume that artists is an array of strings by the code you presented. Simply implement a function that deletes this artist from the state, using the Array.filter() function and save it into the state. Then add a button for each record that calls this function.
class Player extends Component{
constructor (props) {
super(props);
this.state = {
youtube_urls:[],
artists:[],
loadedVideosCount: 0,
currentPlayingIndex: -1,
};
};
render(){
const { select } = this.props
const { artists, youtube_urls, loadedVideosCount, currentPlayingIndex } = this.state;
return (
<div>
<div>
<h1 className="title is-1"><font color="#C86428">{ this.Capitalize(select) } playlist</font></h1>
<div className="Line" />
</div>
{
artists.map((artist, index) => {
return (
<table>
<tbody>
<div key={artist}>
<ul>
<li><strong><font color="#C86428">Artist: </font></strong><strong><font color="#6f4e37" size='2'>{ artist }</font></strong></li>
</ul>
</div>
<ReactPlayer
url={ audio }
controls
width='50'
height='150'
onLoaded={() =>
this.setState(currentState => ({
loadedVideosCount: loadedVideosCount + 1,
currentPlayingIndex:
loadedVideosCount + 1 === youtube_urls.length ? 0 : -1,
}))
}
onEnded={() =>
this.setState(currentState => ({
currentPlayingIndex: currentPlayingIndex + 1,
}))
}
playing={index === currentPlayingIndex}
/>
<div className="Line" />
<span onClick={() => {this.deleteItem(artist)}}>Delete artist</span>
</tbody>
</table>
)
})
}
</div>
)
}
deleteItem = artistToDelete => {
let { artists } = this.state;
let filteredArtists = artists.filter(artist => artist !== artistToDelete);
this.setState({
artists: filteredArtists
})
}
}
P.S. If each artist is not a string, but an object, you will have to modify the filter function, by addding the condition that the array must be filtered by.
EDIT: I made a mistake in the filter function, the === sign, must be changed with !==.