Пример моего кода, как я удаляю элемент, но корректно удаляется только в последовательности от последнего элемента к первому, как корректно реализовать удаление?
class List extends React.Component{
constructor(props){
super(props);
this.state = {type: props.type, items: props.items}
}
remove(id){
let tmpItems = this.state.items.filter((el) => el.id != id);
this.setState( {
items: tmpItems
})
}
render(){
return <div className="row d-flex flex-row align-items-center justify-content-center w-100 h-100 overflow-auto m-0 h-auto">
{this.state.items.map((item) => <Items item = {item} remove = {this.remove.bind(this)} />)}
</div>
}
}
class Items extends React.Component{
constructor(props){
super(props);
this.setName = this.setName.bind(this);
this.setContent = this.setContent.bind(this);
this.setDate = this.setDate.bind(this);
this.state = {id : this.props.item.id, name: this.props.item.name , content: this.props.item.content, date : this.props.item.date, type : props.item.type , isNew: props.item.isNew}
}
componentDidMount(){
}
setName(e){
let text = e.target.textContent.slice(0, 50);
this.setState({name: text})
setTimeout(() => this.afterSet(), 0)
}
setContent(e){
let text = e.target.textContent.slice(0, 1000);
this.setState({content: text})
setTimeout(() => this.afterSet(), 0)
}
setDate(e){
this.setState({date: e.target.text})
setTimeout(() => this.afterSet(), 0)
}
afterSet(){
$.post('/toDoSave', this.state, (data) => {
if (data.isNew){
this.setState({id: data.id, isNew: false})
}
})
}
render(){
return (
<div className = " item container" key = {this.state.id} >
<div contentEditable={true} placeholder = {"Имя"} className="note-name border-bottom border-1 m-2 d-flex align-items-center outline-none my-text text-break overflow-auto" onBlur = {this.setName}>
{this.state.name}
</div>
<div contentEditable={true} placeholder = {"Текст"} className="note-content border-1 m-2 outline-none my-text overflow-auto text-break my-scroll" onBlur = {this.setContent}>
{this.state.content}
</div>
<div className="note-button-group m-2 border-top border-1 d-flex flex-row align-items-center justify-content-between">
<div class="d-flex flex-row">
<div className="note-button p-2 ms-1"><i class="fa-solid fa-chart-bar"></i></div>
</div>
<div class="d-flex flex-row">
<div className="note-button p-2 ms-1"><i class="fa-solid fa-circle-exclamation"></i></div>
</div>
<div class="d-flex flex-row">
<div className="note-button p-2 ms-1"><i class="fa-solid fa-calendar-days"></i></div>
<div className="note-button p-2 ms-1" onClick = {() => {this.props.remove(this.state.id)}} ><i class="fa-solid fa-trash-can"></i></div>
</div>
</div>
</div>
)
}
}