El componente de función se usa aquí
export default function Account() {
definiendo const con entradas como objetos
const [state, setState] = useState({
profile: true,
orders: false,
returns: false,
coupon: false,
referrals: false,
rewards: false,
redeem: false,
address: false,
});
Función para actualizar el estado. Quiero actualizar el estado con la configuración de todos los valores en el objeto en falso y actualizar la clave especificada que pasa por onClick
function activeHandler(key) {
setState((prevState) => {
Object.keys(prevState).forEach((key) => {
if (key == res) {
prevState[key] = true;
} else {
prevState[key] = false;
}
});
console.log(state);
return prevState;
});
}
Elemento JSX, aquí onClick se usa para pasar la clave a la función que se usa para actualizar el estado
return (
<>
<li
className={
state.profile
? "py-3 px-3 border-bottom active"
: "py-3 px-3 border-bottom"
}
onClick={() => activeHandler("profile")}
>
Profile
</li>
<li
className={
state.orders
? "py-3 px-3 border-bottom active"
: "py-3 px-3 border-bottom"
}
onClick={() => activeHandler("orders")}
>
Orders
</li>
</>
);
No dice que hay ningún problema ni pide ayuda con nada, pero está claro que su función de devolución de llamada activeHandler simplemente está cambiando de estado, así que asumiré que ese es el problema con el que está pidiendo ayuda. El state devuelto necesariamente debe ser una nueva referencia de objeto. Copia superficial cualquier estado y estado anidado que se esté actualizando.
Ejemplo:
function activeHandler(key) {
setState((prevState) => ({
...prevState, // <-- shallow copy previous state
[key]: !prevState[key], // <-- toggle value by key
}));
}
Primero quiero establecer todo prevState en falso y luego actualizar el estado donde quiero que la clave especificada sea verdadera
En este caso, sugeriría crear un objeto "predeterminado" con todas las propiedades configuradas como falsas para ser utilizado como un objeto de "plantilla", copiado superficialmente y luego anulada la propiedad específica.
Ejemplo:
const defaultState = {
profile: false,
orders: false,
returns: false,
coupon: false,
referrals: false,
rewards: false,
redeem: false,
address: false,
};
...
function activeHandler(key) {
setState({
...defaultState, // <-- shallow copy default state value
[key]: true, // <-- override value by key
}));
}
Dado que parece que solo desea una propiedad "activa" a la vez, le sugiero que almacene solo la clave activa y verifique eso durante el procesamiento.
Ejemplo:
const [active, setActive] = useState();
...
return (
<>
<li
className={
[
"py-3 px-3 border-bottom",
active === 'profile' ? 'active' : null
]
.filter(Boolean)
.join(" ")
}
onClick={() => setActive("profile")}
>
Profile
</li>
<li
className={
[
"py-3 px-3 border-bottom",
active === 'orders' ? 'active' : null
]
.filter(Boolean)
.join(" ")
}
onClick={() => setActive("orders")}
>
Orders
</li>
</>
);