Logré crear un clic en el ícono para cambiar el esquema de colores de mi sitio web (línea 21 y changeTheme ), pero cuando hago clic en el ícono, también me gustaría que cambie de FaRegMoon a FaRegSun y viceversa (es decir, cuando hago clic una vez que debería cambiar a FaRegSun y cuando haga clic en él otra vez, debería cambiar a FaRegMoon
código actual:
import React, {useState} from 'react' import { FaRegMoon, FaRegSun } from "react-icons/fa" import "./index.sass" const changeTheme = () => { const item = localStorage.getItem("theme") let theme; if (item === "light") { theme = ""; localStorage.setItem('theme', "") } else { theme = "light" localStorage.setItem('theme', 'light') } localStorage.setItem('theme', theme) document.body.className = localStorage.getItem("theme"); } const ThemeToggle = () => { return ( <div className='theme-toggle-button'> <FaRegMoon size={20} onClick={() => changeTheme() }/> </div> ) } export default ThemeToggle;1.) Agregue un estado para su ícono dentro de la función ThemeToggle
const [icon, setIcon] = useState('FaRegMoon')2.) Agregue un parámetro a su función changeTheme.
const changeTheme = (iconName) => { ... }3.) Agregue el nombre del argumento del icono al que desea cambiar al hacer clic
<FaRegMoon size={20} onClick={() => changeTheme('FaRegSun') }/>4.) Refactorice su código ThemeToggle (utilicé un operador ternario para devolver un valor para el icono)
const ThemeToggle = () => { const [icon, setIcon] = useState('FaRegMoon') //place your changeTheme function here with the added code const themeIsLight = (icon === 'FaRegSun'); const Icon = themeIsLight ? <FaRegSun size={20} onClick={() => changeTheme('FaRegMoon') }/> : <FaRegMoon size={20} onClick={() => changeTheme('FaRegSun') }/> return ( <div className='theme-toggle-button'> {Icon} </div> ) }5.) por último, refactorice su función changeTheme. El componente se volvería a representar según el tema que se pasa a la función setState. agregue esta línea de código en la última línea de la función changeTheme. Esperaba que esto ayudara hermano.
setIcon(iconName)