reactSillyStack.js

import React, { useState, useEffect } from "react";

export default function StackExample() {
  const [myArray, setMyArray] = useState([]);

  const addElement = () => {
    var myArrayCopy = [...myArray];
    var newKey = myArray.length;
    myArrayCopy.push({
      item: <input disabled type="button" key={newKey} value={newKey} />
    });
    setMyArray(myArrayCopy);
  };

  const dropElement = () => {
    var myArrayCopy = [...myArray];
    myArrayCopy.pop();
    setMyArray(myArrayCopy);
  };

  useEffect(() => {
    var initialArray = [
      { item: <input disabled type="button" key="0" value="0" /> },
      { item: <input disabled type="button" key="1" value="1" /> }];
    setMyArray(initialArray);
  }, []);

  return (
    <div>
      <p>Stack: LIFO data structure example</p>
      <hr />
      {myArray.map((o) => o.item)}
      <hr />
      <input value="+" type="button" onClick={addElement} />
      <input value="-" type="button" onClick={dropElement} />
      <div>Number of items: {myArray.length}</div>
      {myArray.length % 2 === 0 ? <p>even</p> : <p>odd</p>}
    </div>
  );
}