How to delete a todo item in ReactJs?

Question

Here is my code in which i am trying to delete an item from the list but unfortunately it doesnt deleting according to the index it just deleting in a FIFO order.

export default class Todo extends Component{
    constructor(){
        super();
        this.state={
            text:"",
            todoList:[]
        }
    }
handleText=(e)=>{
    this.setState({text:e.target.value});
};

addTodo=()=>{
let {text,todoList}=this.state;
let list=[...todoList];
list.push(text);
this.setState({todoList:list,text:""})
};

this is a delete function which is taking the index of the item but it is not working correctly.

 delTodo=(index)=>{
        alert(index);
        let list2=[...this.state.todoList];
        list2.splice(index,1);
        this.setState({todoList:list2})
    };
    
    updateTodo=()=>{
    
    };
    
    render() {
        let {text,todoList}=this.state;
        return(
                <div className="App-header">
                    <div className="childApp">
                    <ul className="list-group">
                    {todoList.map((val,index) => {
                        return (
                            <div className="mytodo">
                                <li className="list-group-item">
              <span classname="spname"> {val} </span>
                  <button key={index} id={index} class="btn btn-default btn-s pull-right remove-item" onClick={this.delTodo}>
              <span className="glyphicon glyphicon-remove"></span>
            </button>
             </li>
                      </div>
                        );
                    }
                    )}
                </ul>
                <h1>You have {todoList.length} Todos</h1>
                <input className="todoinput" name="text" value={text} onChange={this.handleText}/>
                <br/>
                <button type="button" onClick={this.addTodo} className="btn btn-success">Add Todo</button>
                <br/>
                </div>
                </div>
              );}}

Answer 1

Issue

The delTodo takes an index, but you pass the onClick event object instead, which isn't a valid index so the splice starts from the beginning of the array.

Solution

Define an anonymous onClick callback and pass the index to the delTodo callback

delTodo = index => {
  alert(index);
  const list2 = [...this.state.todoList];
  list2.splice(index, 1);
  this.setState({ todoList: list2 });
};

...

<button
  key={index}
  id={index}
  class="btn btn-default btn-s pull-right remove-item"
  onClick={() => this.delTodo(index)}
>
  ...

Or redefine delTodo to curry the index value and attach directly as onClick callback

delTodo = index => () => {
  alert(index);
  const list2 = [...this.state.todoList];
  list2.splice(index, 1);
  this.setState({ todoList: list2 });
};

...

<button
  key={index}
  id={index}
  class="btn btn-default btn-s pull-right remove-item"
  onClick={this.delTodo(index)}
>
  ...