我想通过单击确定按钮删除我的列表（卡）

Question

我从json中获取数据并显示，然后单击“确定”按钮后，我想删除关联的联系人列表 我根据电子邮件映射了json数据，并添加了名称，电子邮件和删除按钮的划分，我想在单击“确定”按钮时删除卡。

我是新来的，所以我很困惑。

// Contacts.jsx file

    const ContactsCard = ({contacts}) => {
    return(
    <span className="text-muted"> Email : {contacts.email}</span>
     <button type="button" class="btn btn-danger" data-dismiss="modal">OK</button>
            </div>
    );
    }
    export default ContactsCard;



//    showcontactcard.jsx file

    class contacts extends Component{
      constructor(props){
        super(props);
        this.state = {
          ContactData:json
        }
      }

    render(){
        return (
          <div>
            <div className="list-group" id="contact-list">
                  {this.state.ContactData.map(contactitems=>
                      <div key={json.email}  className="list-group-item">
                          <Contacts contacts = {contactitems}/>
                      </div>
                  )}
              </div>
          </div>
        );
      }
    }
    export default contacts;

当我单击确定按钮时，我希望删除卡。