Estoy tratando de hacer una aplicación viable en la que obtienes de una API algunos datos y esos datos cambian aleatoriamente cada 3 segundos y con un botón el usuario puede imprimir los datos y al presionar nuevamente se detiene, logré completar esto ( como se ve a continuación) parte (por cierto, nuevo para reaccionar js):

 useEffect(() =>{ const interval = setInterval(() => { getJoke() },3000); return () => clearInterval(interval); },[]) //fetch the jokes function const getJoke = (() => { fetch('https://api.chucknorris.io/jokes/random') .then((res) => res.json()) .then((res) => { setKey(res.id); setJoke(res.value); }) .catch((err) => console.log(err)); })

También hice un botón donde el usuario puede guardar los datos (que aparecen aleatoriamente cada 3 segundos) en el almacenamiento local del navegador como se ve a continuación.

 const addJokeFav = (() => { jokes.push(joke); const jokesJsonified = JSON.stringify(jokes); localStorage.setItem(key, jokesJsonified); }) bellow the render code <button id="button" onClick={()=>{addJokeFav()}}>Save!</button>

pero me gustaría tener solo un botón en el que guarde un dato que llegue al azar y cada 3 segundos, y si vuelve a presionar el botón, los datos se eliminarán del almacenamiento local. Tengo esta función aquí que no parece que funcione.

 const remJokeFav = (() => { const jokesJsonified = JSON.stringify(jokes); localStorage.removeItem(key, jokesJsonified); })

parece que está tratando de eliminar un elemento que no está allí debido a la clave, que tomo con setKey (res.id) en la respuesta, en el código anterior en el primer fragmento. Las variables de mi aplicación están debajo.

 const [joke, setJoke] = useState(); const [key, setKey] = useState([]); const [isActive, setActive] = useState("false"); const jokes = [];

Gracias por cualquier ayuda con respecto a la situación!