How can I use the map() method in javascript to create a div with a button that fetches from an API

Im am trying to create a bunch of div elements on a page using the map() function. The array mapped is called cards, and each of these cards has a value called the id. Im trying to have a button on each div that will post to an api using the respective card’s id.

For example: If the cards array includes 3 cards, card1, card2, and card3, I want to create three divs, one for each card. I want each div to have a button that will allow me to add that card to a database using the card id. So if card1 had a card id of 1, when I press the button, the card id 1 should be added to the database. Any help is appreciated, thanks!

HTML code:

<div className="cardImages">
        {cardsFetched ? (
          cards.data.map((card) => (
            <div className="searchedCards" key={card.id}>
              <div className="singleCard">
                <img src={card.images.small} />
                <p>Card ID : {card.id}</p>
                <button onClick={() => addToCollection2(card.id)}>
                  Add Card
                </button>
              </div>
            </div>
          ))
        ) : (
          <div>Searched cards will appear below</div>
        )}
      </div>