how to get the id of the card in which the button is selected in REACT-CodePudding

hope you're doing well! after having succefully getting all the experiences from the database and saved that in a state (experiences) like the code shows. I'm trying now to get the current selected experience when clicking on the Validate button( to update a field in this current experience selected ) and then deleting the card in which I clicked the button this is the code :

function Tables() {

  const [experiences, setExperiences] = useState(null);
useEffect( () => {

 const response = /*some code to get the experiences*/
      
 setExperiences(response.experiences);
 setIsPending(false);

  },[experiences]);

 function showConfirm(values) {
    confirm({
      title: 'Do you Want to Validate this Experience?',
      content: 'Some descriptions',
      onOk() {
        console.log('Yes');
    //await contract.methods.validateExperience("titrePoste", account[0]).send({ from: account[0] });
    console.log(values.id);
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
return (
    <>
<Row gutter={[24, 24]}>
              {isPending && <div>Loading ... </div>}
              {experiences && experiences.map((experience, index) => (
                <div key = {experience.id} >
                  {
                    experience.valide
                      ? <p></p>
                      
                      : <Col span={24} >
                      <Card className="card-billing-info" bordered="false">
                        <div className="col-info">
                          <Descriptions title={experience.titrePoste}>
                            <Descriptions.Item label="Job Title" span={3}>
                              {experience.titrePoste}
                            </Descriptions.Item>
                            <Descriptions.Item label="Description" span={3}>
                              {experience.description}
                            </Descriptions.Item>
                          </Descriptions>
                        </div>
                        <div className="col-action">
                          <Button type="link" danger onClick={showDeleteConfirm}>
                            {deletebtn}DELETE
                          </Button>
                          <Button type="link" onClick={showConfirm}>
                            {<CheckOutlined />} VALIDATE
                          </Button>
                        </div>
                      </Card>
                      </Col>

                  }
                  </div>
              ))}
            </Row>
   </>
  );
}```

CodePudding user response：

You can pass the iterated experience to showConfirm or showDelete functions like:

<Button type="link" onClick={() => showConfirm(experience, index)}>
  <CheckOutlined /> VALIDATE
</Button>

with this clicked experience as param, yours will be values, you can did what you want.

you will have the clicked experience and her index if needed