From 7 - Raising and Handling Events.mp4, Code With Mosh - Mastering React 

Counter.js

/* Child Component */
import React, { Component } from "react";
class Counter extends Component {
  render() {
    const { onDelete } = this.props;

    return (
      <button
        onClick={() => onDelete(counter.id)}
        className="btn btn-danger btn-sm m-2"
      >
        X
      </button>
    );
  }
}

Counters.js

/* Parent Component */
import React, { Component } from "react";
import Counter from "./Counter";

class Counters extends Component {
  state = {
    counters: [
      { id: 1, value: 0 },
      { id: 2, value: 1 },
      { id: 3, value: 4 },
      { id: 4, value: 0 },
      { id: 5, value: 0 },
    ],
  };

  handleDelete = (id) => {
    this.setState({
      counters: this.state.counters.filter((el) => el.id !== id),
    });
  };
  render() {
    const { onDelete } = this.props;

    return <Counter onDelete={this.handleDelete} />;
  }
}

export default Counters;