How to pass parent method to child?

Question

React

It is necessary that when you click on

<CloseOutlined onClick={props.handleDelete}  key="delete" />, ]}>

The card that I clicked on was deleted.

Don't judge strictly, I'm just starting to learn react
Here is the whole code

import React, { Component } from 'react'
import { Card, message } from 'antd';
import { CloseOutlined } from '@ant-design/icons';

const CardInfo = (props) => { 

  return(
    <Card {...props} style={{ width: 300, marginTop: 16, marginRight: 20 }} actions={[
      <CloseOutlined onClick={props.handleDelete}  key="delete" />, ]}>
      <h3>Заказ № {props.id}</h3>
      <div className="orders__info">
        <span>Имя: {props.name}</span>
        <span>Телефон: {props.phone}</span>
        <span>Тип объекта: {props.type}</span>
        <span>Состояние: {props.objstate}</span>
        <span>Площадь: {props.area}</span>
        <span>Дизайн-проект: {props.disign}</span>
        <span>Полы: {props.floor}</span>
        <span>Стены: {props.wall}</span>
        <span>Потолки: {props.ceiling}</span>
        <span>Цена: {props.price}</span>
      </div>
    </Card>
  );
}

const CardStructure = (props) => {

  return (
    <CardInfo {...props}/>	
  );
}

const CardList = (props) => {
  return (
    	<div className="cards__list">
        {props.cards.map(card => <CardStructure {...card} />)}
      </div>
    );
};

export default class Orders extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       data: [
        {
          key: 1,
          id: 1,
          name: 'Данил',
          phone: '88005553535',
          type: 'Квартира',
          objstate: 'Стройвариант',
          area: 220,
          disign: 1,
          floor : 'плитка',
          wall: 'Обои',
          ceiling: 'Гипсокартон',
          price: 240000
        },
        {
          key: 2,
          id: 2,
          name: 'Вася',
          phone: '89666666666',
          type: 'Дом',
          objstate: 'Стройвариант',
          area: 550,
          disign: 2,
          floor : 'Ламинат',
          wall: 'Обои',
          ceiling: 'Гипсокартон',
          price: 1000000
        }
       ]
    }
  }
  
  handleDelete(key) {
    const data = [...this.state.data];
    this.setState({ data: data.filter(item => item.key !== key) });
    message.warning('Заказ удален');
  }

  render() {
    return (
      <div className="orders">
        <h2>Заказы</h2>
        <CardList handleDelete={this.handleDelete} cards={this.state.data}/>
      </div>
    )
  }
}

Answer 1

handleDelete = e => {
  const id = +e.currentTarget.dataset.id;
  this.setState(({ data }) => ({
    data: data.filter(n => n.id !== id),
  }));
}

const CardList = ({ cards, handleDelete }) => (
  <div className="cards__list">
    {cards.map(n => <CardInfo {...n} handleDelete={handleDelete} />)}
  </div>
);

<CloseOutlined onClick={props.handleDelete} data-id={props.id} />

Answer 2

At this point in the CardList component, the transfer of the handler breaks

{props.cards.map(card => <CardStructure {...card} />)}

It is necessary to pass handler from props to CarfStructure