Getting my delete button to actually work

#1 
import React from 'react';
import Form from './Components/Form';
import axios from 'axios';
import List from './Components/List'


class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      name: '',
      comment: '',
      registrations: []
    }
this.onInputChange = this.onInputChange.bind(this);
this.onFormSubmit = this.onFormSubmit.bind(this);
this.onDeleteClick = this.onDeleteClick.bind(this);
  }

componentDidMount () {
  axios.get('/registrations')
  .then(response => {
    this.setState({
      registrations: response.data
    })
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });
}

onInputChange (event) {
  event.preventDefault();
  this.setState({
    [event.target.name]: event.target.value
  })
}

onFormSubmit (event) {
  event.preventDefault();

  axios.post('/registrations', {
    name: this.state.name,
    comment: this.state.comment
  })
  .then(response => {
    this.setState({
      registrations: response.data
    })
  })
  .catch(error => {
console.log(error);
  });
}

  onDeleteClick (index) {
    axios.delete(`/registrations/${index}`)
    .then(response => {
        console.log(response.data)
    })
    .catch(error => {
        console.log(error);
    })

}

  render(){

    return(
    <div className='mainApp'>
      <Form onInputChange={this.onInputChange}
            onFormSubmit={this.onFormSubmit}
            name = { this.state.name }
            comment = { this.state.comment }
      />

      <List 
      registrations = { this.state.registrations }
      onDeleteClick={this.onDeleteClick}
      />
    </div>
    )
  }

}

export default App;

import React from 'react';
import './List.css';
import ListItem from './ListItem';


class List extends React.Component{
    constructor(props){
        super(props);
        // this.state = {

        // }
    
    }


    render(){
        return (
            <div className="userInformation">
                <table>
                    <tr>
                        <th>Name</th>
                        <th>Comment</th>
                        <th></th>
                    </tr>
                    {this.props.registrations.map((item, index) => {
                    return <ListItem data={item}
                            onDeleteClick={this.props.onDeleteClick}
                            index={index}          />
                    })}
                </table>
            </div>
        )
    }
}

export default List;

import React from 'react';
import List from './List';

const ListItem = (props) => {
    return ( 
    <tr>
        <td>{props.data.name}</td>
        <td>{props.data.comment}</td>
        <td>
        <button className="deleteButton" onClick = {() => {this.props.onDeleteClick(props.index)}}>Delete</button>
        </td>
        <td>
        <button className="editButton">Edit</button>
        </td>
    </tr>
    )
  }

  export default ListItem;

So list is a child of App, and ListItem is a child of list, what am I missing here?

#2

ListItem is a functional component, it doesn’t have this.

#3