Tengo una matriz cuyos valores se convierten en botones. Al hacer clic sobre cada uno de los botones, su valor se escribe en la lista ul. Y cuando haga clic en 'Pop', el último valor se eliminará.

Rendimiento esperado:

Yo uso from useStack hook para implementarlo. Pero después de ejecutar, el resultado es una página en blanco y recibo este error en la consola:

 Uncaught TypeError: stack is undefined

componentes.js:

 import React from 'react'; import {useStack} from './hooks' export function Demo() { return ( <div className="demo"> <StackDemo/> </div> ); } const words = ['Apple', 'Banana', 'Cherry', 'Grape']; function StackDemo() { const {stack, push, pop} = useStack(); return (<div> {words.map((word, index) => <button key={index} onClick={() => push(word)}>{word}</button>)} <button onClick={pop}>» Pop</button> <ul> {stack.map((item, index) => <li key={index}>{item}</li>)} </ul> </div>); }

ganchos.js:

 import {useState} from 'react'; export function useStack() { const [array,setArray] = useState([]); const add = (value) => { return setArray(array.push(value)); } const del = () => { return setArray(array.pop()); } return {array, add, del}; }

Por supuesto, si edito components.js:

// const {apilar, empujar, sacar} = usarStack(); a // const [apilar, empujar, sacar] = useStack();

Y edite hooks.js:

// devuelve {array, add, del} a // devuelve [array, add, del]

Luego se muestra la salida:

Pero cuando hago clic en uno de ellos, la salida se convierte en una página en blanco y recibo este error en la consola:

 Uncaught TypeError: stack.map is not a function

¿Cuál es el problema? ¿Cómo debo asignar la salida useStack a const {stack, push, pop} ?

Gracias por cualquier ayuda.