Cada botón cambia de color cuando se presiona. Y quiero que mantengan ese color cada vez que la página se recarga hasta que se ejecute aa localStorage.clear(). Así que estoy tratando de volver a aplicar el css aplicado anteriormente con almacenamiento local. Mi idea es almacenar los Id. de cada botón, recorrer los Id. y volver a aplicar css. Pero sigue arrojando un error: "No se pueden leer las propiedades de nulo (leyendo 'estilo')". ¡Otro problema que parece tener es que pierdo mi almacenamiento local en la recarga de la segunda página! Si tiene una manera de mejorar esto o una mejor manera de hacerlo, ¡hágamelo saber! Gracias.

Código ACTUALIZADO
Aquí hay un enlace a la versión más funcional https://codesandbox.io/s/festive-rui-vz7tf?file=/src/App.js Agregué un "Borrar historial Btn". El único problema ahora es que después de recargar y seleccionar otro botón, el almacenamiento local se borra por completo con la nueva selección. Lo que necesito son las selecciones para apilar hasta que el usuario ejecute localStorage.clear().

 import React,{useState,useEffect} from 'react'; const App=()=> { const [btns, setBtns] = useState([]); useEffect(() => { localStorage.setItem('BtnsClicked', JSON.stringify({ btns })); }, [btns]); const handleAcknowledge=(event)=>{ setBtns([...btns, event.target.id]) event.target.style.backgroundColor = "red" event.target.innerHTML = "Clicked!" } const reSelectBtns=()=>{ const storedBtns = JSON.parse(localStorage.getItem('BtnsClicked')); if (storedBtns.btns.length){ storedBtns.btns.forEach(btn=>{ console.log(document.getElementById(btn).style.backgroundColor = "red") }) } } reSelectBtns() return ( <div className="App"> <button id = "1" onClick={handleAcknowledge}>Acknowledge</button> <button id = "2" onClick={handleAcknowledge}>Acknowledge</button> <button id = "3" onClick={handleAcknowledge}>Acknowledge</button> <button id = "4" onClick={handleAcknowledge}>Acknowledge</button> </div> ); } export default App;