Store data from json to localStorage browser

Question

I'm trying to make a program where you get from an API, and every 3 seconds you get a new value, so far so good, I get the value using useEffect/useState.

 const [data, setData] = useState(); useEffect(() =>{ const interval = setInterval(() => { getData() },3000); return () => clearInterval(interval); },[]) //fetch the data function const getJoke = (() => { fetch('API URL').then((res) => res.json()).then((res) => { setData(res.value); }).catch((err) => console.log(err)); })

So everything work fine with this, I get the data appear every 3 seconds

 <button id="button" onClick = {handleGetT}>{isActive? 'Get Data': 'Stop'}</button> <h3>{isActive? null: data}</h3>

But I'm really struggling to save the like as favourite. I have an other button where when you click it you save it on the localstorage browser data.

 <button id="button" onClick = {localStorage.setItem("name",data)}>Save!</button>

I know the above may not be appropriate way of doing it, for some reason I get different data saved on localstorage every 3 seconds, and I would like to save the when clicked the joke that appears, on lets say an array, so I could use it later to print it.

Answer 1

The function in onClick runs itself every time the button is rendered. You need to wrap it in an anonymous function like this:

<button id="button" onClick={()=>{localStorage.setItem("name",data)}}>Save!</button>

More info: https://stackoverflow.com/a/33846760/9224578