My purpose is delete specific table row after click. I have two components and already wrote function to remove row from the table handleDelete()
. The problem is, after click, always the last row is deleted, not the one on which I clicked. Probably I need to pass value, for example props.nameTask
, to parent component but it doesn't work (error in console).
Parent:
class Home extends Component {
constructor(props) {
super(props);
this.state = { data: [] };
this.handleDelete = this.handleDelete.bind(this);
}
// Delete row from table
handleDelete = (index) => {
var array = this.state.data.slice();
array.splice(index, 1)
this.setState({ data: array });
}
render() {
return (
<div>
<TableTasks handleDelete={this.handleDelete} data={this.state.data} header={[{ name: "Task" }, { name: "Delete" }]} />
</div>
);
}}
export default Home;
Child:
const row = (props, i, handleDelete) =>
<TableRow key={`thr-${i}`}>
<TableRowColumn>
{props.nameTask}
</TableRowColumn>
<TableRowColumn className="IconButton">
<IconButton>
<DeleteIcon onClick={handleDelete}/>
</IconButton>
</TableRowColumn>
</TableRow>;
export const TableTasks = ({ data, header, handleDelete }) =>
<Table>
<TableHeader>
<TableRow>
{header.map((x, i) =>
<TableHeaderColumn key={`thc-${i}`}>
{x.name}
</TableHeaderColumn>
)}
</TableRow>
</TableHeader>
<TableBody>
{data.map((x, i) => row(x, i, handleDelete))}
</TableBody>
</Table>;
I believe the problem comes from the index you pass to the parent function handleDelete
which should not have the value you want (try logging it to see what it is)
I would suggest to add the index you want to delete to your <DeleteIcon/>
element as a new property.
Change the parent handleDelete
to something like:
handleDelete = e => {
const index = e.currentTarget.getAttribute('index')
...
}
For that you need to pass some unique identifier to parent component to delete specific item from array, like name or row index etc.
By row index:
Pass the index to DeleteIcon
component:
<DeleteIcon itemIndex={i} onClick={handleDelete}/>
Now from DeleteIcon
component call handleDelete
function with item index:
this.props.handleDelete(this.props.itemIndex);
Use that index to delete the specific item.
By any other unique property:
Same approach, but you need to run the loop to find the index of that unique item, after getting the index delete the item and update the state.
Suggestion:
Since you are updating the parent array (deleting the elements) so its not a good idea to use the array index as key, use some other unique property for key.
Check this answer for more details: Why using array index as key is not a good idea?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.