[react]Passing the index of a list item through a button next to it

JavaScript
1

I’m trying to pass the index of the li where the button was clicked but I can’t figure out how to get the index.
Edit: it’s the deleteToDo function
app.js :

import React, { Component } from 'react';
import './App.css';
import ToDo from "./components/ToDo.js"

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      todos: [
        {description: 'Walk the cat', isCompleted: false},
        {description: 'Throw the dishes away', isCompleted: false},
        {description: 'Buy new dishes', isCompleted: false}
      ],
       newTodoDescription: ''
    };
  }

  handleChange(e){
    this.setState({newTodoDescription: e.target.value})
  }

  handleSubmit(e){
    e.preventDefault();
    if(!this.state.newTodoDescription){return}
    const newTodo = {description: this.state.newTodoDescription, isCompleted: false};
    this.setState({todos: [...this.state.todos, newTodo], newTodoDescription: ""})
  }

  toggleComplete(index){
    const todos = this.state.todos.slice();
    const todo = todos[index];
    todo.isCompleted = todo.isCompleted ? false : true;
    this.setState({todos: todos});
  }

  deleteToDo = (index, event)=>{
   console.log(index);

  }

  render() {
    return (
      <div className="App">
      <ul>
      { this.state.todos.map( (todo, index) =>
          <ToDo deleteToDo={this.deleteToDo} key={ index } description={ todo.description } isCompleted={ todo.isCompleted } toggleComplete={ () => this.toggleComplete(index) } />
                  )}
      </ul>
      <form onSubmit={(e) => this.handleSubmit(e)}>
        <input type="text" value={this.state.newTodoDescription} onChange={(e) => this.handleChange(e)}/>
        <input type="submit" />
      </form>
      </div>
    );
  }
}

export default App;

ToDo.js :

import React, { Component } from "react";

class ToDo extends Component{
  render(){
    return(
      <li>
        <input type="checkbox" checked= {this.props.isCompleted} onChange={this.props.toggleComplete}/>
        <span>{this.props.description}</span>
        <button onClick={this.props.deleteToDo}>Delete</button>
      </li>
    );
  }
}

export default ToDo;
3

Thank you man I really appreciate the help.