Tengo una pregunta sobre el evento onClick usando ganchos React. De hecho, quiero que el texto cambie a otro texto cuando el usuario haga clic y cuando el usuario haga clic nuevamente, vuelva al primer texto. Por ejemplo, el usuario hace clic en el texto "Cambiar primero", luego el texto cambia a "Cambiar segundo". Luego, si el usuario hace clic en "Cambiar segundo", el texto cambia a "Cambiar primero". Cambiará siempre que el usuario haga clic en el texto.
Esta es mi función useState:
const [shopStat, setshopChange] = useState("Change first");Y debajo está la parte donde quiero cambiar el texto:
<div className="featuredItem"> <span className="featuredTitle">Your text is</span> <div className="featuredMoneyContainer"> <span className="featuredMoney" style={{ color: green }} onClick={() => setshopChange("Change second")} > {shopStat} </span> </div> </div>Sin embargo, el código anterior solo cambia el texto una vez a "Cambiar segundo" y no puedo volver a hacer clic en el texto para volver a cambiarlo a "Cambiar primero". Espero que todos puedan ayudarme. Gracias.
Establecer funciones de estado acepta el estado actual como parámetro para que pueda usarlo así.
onClick={() => setshopChange((currentState) => currentState === "Change second" ? "Change First" : "Change second" )}import React, {useState} from 'react'; import './App.css'; function App() { const [shopStat, setshopChange] = useState(true); return ( <main onClick={() => setshopChange(!shopStat)}> {shopStat === true ? "Change first" : "Change second"} </main> ); } export default App;