删除一个总是返回数组最后一项的组件

Question

I'm trying to delete a component receiving your id as param for my function deleteCard(). This component is wraped in an array, but at trigger the function this always deletes the last item of the array. I'm using map to render my array of cards.

Please check the code in my GitHub. I'm using react Modal for control the cards rendering and the deleteCard function is invoked from an external file:

https://github.com/pablolucio97/places-to-know

Card compoenent:

const Card = ({
    id,
    local,
    countryName,
    countryFlag,
    goalDate,
    openModalDelete,
    openModalEdit
} : countryCardTypes) => {
    return (
            <CardContainer key={id}>
                <TopContainer>
                    <CountryInfoContainer>
                        <ImageFlag src={countryFlag} />
                        <CountryTitle>{countryName}</CountryTitle>
                    </CountryInfoContainer>
                    <ButtonsContainer>
                        <EditButton onClick={openModalEdit}>
                            <MdEdit size={18} color='#333'/>
                        </EditButton>
                        <CloseButton onClick={openModalDelete}>
                            <MdClose size={18} color='#333'/>
                        </CloseButton>
                    </ButtonsContainer>
                </TopContainer>
                <Divider />
                <BottomContainer>
                    <Text>Local: {local}</Text>
                    <Text>Meta: {goalDate}</Text>
                </BottomContainer>
            </CardContainer>
    )
}

export default Card

Function to delete card:

  async function deleteCard(id: number){
    await axios.delete(`http://localhost:3333/cards/${id}`)
  }

Rendering the array of cards:

  {
          countriesCards?.map(card => (
            <Card
              id={card.id}
              local={card.local}
              goalDate={card.goalDate}
              countryName={card.countryName}
              countryFlag={card.countryFlag}
              openModalEdit={() => { setShowModalEdit(true) }}
              openModalDelete={() => { setShowModalDelete(true) }}
            />
          ))
        }

What to do for my deleteCard() deletes the current card that trigger this function?

Answer 1

Please check the code in my GitHub. I'm using react Modal for control the cards rendering and the deleteCard function is invoked from an external file:

https://github.com/pablolucio97/places-to-know