Update List on Click React

Question

The display of map function is updating on input change only. Can someone explain why.

Even though I m useEffect refreshing the page on stack change. Its not working. only input field change is updating the display.

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

export default function App() {
  const [stack, setStack] = useState([]);
  const [values, setvalues] = useState("");

  useEffect(() => {
    console.log("Refeshed");
  }, [stack]);

  return (
    <div className="App">
      <div className="app-left">
        <input
          className="stack-input"
          placeholder="Element"
          value={values}
          onChange={(e) => {
            setvalues(e.target.value);
          }}
        />
        <button
          className="push-btn"
          onClick={() => {
            stack.push(values);
          }}
        >
          Push
        </button>
        <button
          className="pop-btn"
          onClick={() => {
            stack.pop();
          }}
        >
          Pop
        </button>
      </div>
      <ul className="app-right">
        {stack.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Answer 1

You need to call setStack on click, and use prevState to update values. Calling setStack with let useEffect to recognise the change in state and will re-render the component

setStack(oldStack => [...oldStack, values]); // adding (.push)

To pop

setItems(oldStack => oldStack.slice(0, -1)); // removes last element