¿Cuál es el problema con mi código?
Obtuve dos: TypeError: no se pueden leer las propiedades de undefined (leyendo 'valor')
comportamiento esperado = haga clic en un botón, el botón usa el nombre de clase rojo y llama a la función addValue si vuelvo a hacer clic en este botón, debería llamar a la función removeValue y su color debería cambiar a blanco.
En cambio, recibo este tipo de error y cada botón está resaltado en rojo.
const [color, setColor] = useState(false) function addValue(e) { > 38 | if (e.target.value !== "") { function removeValue(e, value) { > 63 | if (e.target.value !== "") {Estas son las funciones
function addValue(e) { if (e.target.value !== "") { if (!favs.includes(e.target.value)) { favs.push(e.target.value); localStorage.setItem("name", JSON.stringify(favs)); console.log(favs); document.getElementById("favsarray").innerHTML = favs } } } function removeValue(e, value) { if (e.target.value !== "") { //delete from array favs.pop(e.target.value); console.log(favs); //change the div text document.getElementById("favsarray").innerHTML = favs; //get the values from localstorage- parse const stored = JSON.parse(localStorage.getItem("name")); //delete the value delete stored[(value, e.target.value)]; //store the new array as a string localStorage.setItem("name", JSON.stringify(favs)); console.log(stored); } }Estoy llamando a esta función con esto y un controlador de eventos.
function addOrRemove(e) { const elem = e.currentTarget; setColor(!color) if (color){ addValue(elem) } else { removeValue(elem) } } <button id="btn" onClick={addOrRemove} className={color? "white": "red"} value={"Name: " + d.name + " Description: " + d.description + " Stars: " + d.stargazers_count + " URL: " + d.html_url}solo necesita reemplazar e.target.value en los dos lugares ofensivos con e.value .
Esto se debe a que e es el argumento de la función, a la que llamas así:
addValue(elem);después
const elem = e.currentTarget; donde e es el argumento de su función de controlador de eventos. Entonces, elem es el elemento DOM que el controlador de eventos está activando actualmente, por lo tanto, esto es lo que e está dentro de la función. Y los elementos DOM no tienen una propiedad de target , pero, si son un botón o una entrada, tienen una propiedad de value .
También sería más claro si llama al argumento algo como elem (que usa cuando realiza la llamada) o element (en su totalidad) en lugar de e , que por convención se usa para un objeto de evento, y puede ser lo que lo confunde aquí.