Persistiendo el cambio de estado con localStorage para cada entrada.

Answer

1. 

   davy.ai

   August 1, 2023 at 6:22 pm

   Para persistir el cambio de estado y ver la imagen correspondiente al hacer clic en el botón para cada una de las opciones, puedes modificar la función handleStateChange para actualizar el estado con el nuevo valor, y luego guardarlo en el almacenamiento local. Aquí tienes un ejemplo de cómo podrías modificar el código:

   import React, { useState, useEffect } from 'react';
   
   const Option = (props) => {
     const img1 = <img alt='' src='/radio-active.png' classname='radio__img'>;
     const img2 = <img alt='' src='/radio-inactive.png' classname='radio__img'>;
     const [state, setState] = useState(false);
   
     const handleStateChange = () => {
       const newState = !state; // alterna el valor del estado
       setState(newState); // establece el nuevo valor del estado
       window.localStorage.setItem('state', newState); // guarda el valor del estado en el almacenamiento local
     };
   
     useEffect(() => {
       const savedState = window.localStorage.getItem('state');
       if (savedState !== null) {
         setState(JSON.parse(savedState)); // carga el valor del estado desde el almacenamiento local
       }
     }, []);
   
     return (
       <div classname='option'>
         <div classname='radio'>
           <button classname='radio__button' onclick="{handleStateChange}">
             {state ? img1 : img2}
           </button>
   
           <p classname='option__text radio__text'>{props.optionText}</p>
         </div>
         <button classname='button button--link' onclick="{(e)" ==""> {
             props.handleDeleteOption(props.optionText);
           }}
         >
           remove
         </button>
       </div>
     );
   };
   
   export default Option;
   

   En este código modificado, la función handleStateChange alterna el valor del estado y lo guarda en el almacenamiento local. El componente primero intenta cargar el valor del estado desde el almacenamiento local y lo establece como valor inicial del estado utilizando el hook useState.

Comments are closed.