You should change the onClick. More precisely call the method after getting items from getCardList() method.

This is an example:

const printCardList = (arr) => {
   const uo_list = document.getElementById("verify_list");
   arr.forEach((card) => {
      let list_item = document.createElement("li");
      let str = card.name + " " + card.mana_cost + " " + card.set_name;    
      list_item.appendChild(document.createTextNode(str));
      uo_list.appendChild(list_item);
   });
};

// this is a test method. Not the real one
const getCardList = () => {
   return [ { name: "Card", mana_cost: 0, set_name: "Set: Card" } ];
};

<div className="list-confirm">
    <h3> Please confirm card list </h3>
    <ul id="verify_list"></ul>
    <br />
    <button onClick="printCardList(getCardList())">Confirm</button>
</div>

I'm not sure what you are trying to do, the first part of your code is plain javascript that manipulates the DOM, while the second part is react js object. You normally don't want to mix these two, either you code your javascript as part of the html, like the first part, or - if you want to create an array of cards in react you can do something like:

let cardList = arr.map(card => {
    listItem = <li>{card.name + " " + card.mana_cost + " " + card.set_name }</li>    
    return listItem;
})

return(
<div className="list-confirm">
    <h3> Please confirm card list </h3>
    <ul id="verify_list">{cardList}</ul>
    <br />
    <button onClick={getCardList}>Confirm</button>
  </div>
);

what I did is assigned the list itself to a variable named 'cardList', JSX object are just javascript objects, so you can assign them to a variable or return then from a function. to place the card list inside the page (or component), you can just use the {} notation, which will embed the cardList object as part of the returned JSX object.

Thanks for all the advice. In hindsight, I should have stuck to what I was learning and not try to freestyle. React is about using states. So rather than having a function that will generate HTML from an array of data and I had to do use "the state". Then code the render to loop through the list of cards when the button is pressed.

const [state, setState] = useState([]);
const card_list= ()=> {...}
const changeState = ()=> {setState(card_list)}

return(
<div className="list-confirm">
    <h3> Please confirm card list </h3>
      <ul>
          {state.map((card) => (
            <li>{card.name}</li>
          ))}
        </ul>
    <br />
    <button onClick={changeSate}>Confirm</button>
  </div>
);