Deleting individual items from react-beautiful-dnd horizontal list - reactjs

Question

I have react-beautiful-dnd horizontal multiple list(6 rows with the same items in each row) with the same items in each list.
I want to delete individual selected items from each list, but just having a button component with onClick fires the onClick while rendering the lists itself. How do i configure the list so that an individual item is deleted from that list when i click on the close/delete (x) button?
Below, is my code,
import React, { Component } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import {Button, Icon} from 'semantic-ui-react'
// a little function to help us with reordering the result
const reorder = (list, startIndex, endIndex) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
const grid = 12;
const getItemStyle = (isDragging, draggableStyle) => ({
// some basic styles to make the items look a bit nicer
userSelect: 'none',
padding: grid / 2,
margin: `0 ${grid}px 0 0`,
// change background colour if dragging
background: isDragging ? 'lightgreen' : 'lightgray',
// styles we need to apply on draggables
...draggableStyle,
});
const getListStyle = isDraggingOver => ({
background: isDraggingOver ? 'lightblue' : 'white',
display: 'flex',
padding: grid,
overflow: 'auto',
});
class DragAndDrop extends Component {
constructor(props) {
super(props);
this.state = {
items: this.props.uniqueEntries
};
this.onDragEnd = this.onDragEnd.bind(this)
this.removeSubject = this.removeSubject.bind(this)
}
onDragEnd(result) {
// dropped outside the list
if (!result.destination) {
return;
}
const items = reorder(
this.state.items,
result.source.index,
result.destination.index
);
this.setState({
items,
});
}
componentWillReceiveProps(newProps){
this.setState({
items : newProps.uniqueEntries
})
}
removeItem = (index) => {
this.state.items.splice(index, 1)
}
render() {
return (
<DragDropContext onDragEnd={this.onDragEnd}>
<Droppable droppableId="droppable" direction="horizontal">
{(provided, snapshot) => (
<div
ref={provided.innerRef}
style={getListStyle(snapshot.isDraggingOver)}
{...provided.droppableProps}
>
{this.state.items.map((item, index) => (
<Draggable key={item.Id} draggableId={item.Id}
index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
>
<Button icon size='mini'
style={{backgroundColor : 'lightgray' ,padding:
'0', float: 'right'}}
onClick = {this.removeItem(index)}>
<Icon name='close' />
</Button>
{item.name}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
);
}
}
export default DragAndDrop

Answer 1

A Note for this bug that might hit you later and future viewers. 😋
You are not supposed to mutate the state directly. It will have some side effects or none at all.
I also recommend you generate unique IDs because if you create more list, it will also have some unexpected result even react-beautiful-dnd won't notice.
If you want to update or remove state data, use setState(). First modify existing data with a copy. Then assign the new value.
removeItem(index) {
// do magic here to filter out the unwanted element
// Update via 'setState'
this.setState({
items : newModifiedItems
})
}
For an example, my trial method below:
removeItem(e) {
e.preventDefault();
// give your single list a className so you can select them all
const sourceList = document.querySelectorAll(".list-name");
const arrList= Array.from(sourceList);
// make shallow copy of your state data
const newItems = Array.from(this.state.items);
// Find index element from whole list Arr by traversing the DOM
const removeItemIndex = arrList.indexOf(e.target.parentElement);
// Remove it
newItems.splice(removeItemIndex, 1);
this.setState({
items: newItems
})
}

Answer 2

I found out why it was firing at render, instead of passing the function i was initiating it so through the loop it was getting called. Then i did this and it worked. May be this will help someone who might face a similar issue.
<Button icon size='mini'
style={{backgroundColor : 'lightgray' ,padding: '0',
float: 'right', marginLeft:'15px'}}
onClick = {() => this.removeItem(index)}>
<Icon name='close' />
</Button>