const [isShown,setIsShown]=React.useState([false,"Hide"]) function toggleIsShown(){ setIsShown(prev=>{ prev[0]=!prev[0] return prev }) }Como soy un principiante que aprende a reaccionar, no puedo entender la idea de cambiar de estado. Es por eso que estoy luchando con el problema anterior. Nuevamente, cuando presiono un botón determinado, quiero alternar el primer elemento de "isShown"
Podrías hacer esto:
function toggleIsShown(){ setIsShown([!isShown[0], isShown[1]]); }Pero, en general, esta variedad de valores solo generará más confusión y problemas. ¿Están estos dos valores siquiera relacionados? Si no, sepáralos:
const [isShown,setIsShown] = React.useState(false); const [someText,setSomeText] = React.useState("Hide");Entonces alternar es semánticamente más simple:
function toggleIsShown(){ setIsShown(!isShown); }O si estos valores están relacionados, cree un objeto semánticamente significativo:
const [shownInfo,setShownInfo] = React.useState({ isShown: false, someText: "Hide" });Y actualice la propiedad por nombre:
function toggleIsShown(){ setShownInfo({ ...shownInfo, isShown: !shownInfo.isShown }); }El punto es que las matrices no son la estructura adecuada para agrupar valores aleatorios. Una matriz debe representar una colección de algo en particular. Estos valores que tiene no están relacionados (deben estar separados) o tienen algún tipo de significado semántico en su relación (debe ser un objeto con propiedades con nombre).
Duplique el estado, haga su ajuste y configure:
setIsShown(prev => { const clone = [ ...prev ]; clone[0] = !clone[0]; return clone; });Intentalo:
const { useState } = React; const Example = () => { const [isShown,setIsShown] = useState([ false, "Hide" ]) function toggleIsShown(){ setIsShown(prev => { const clone = [ ...prev ]; clone[0] = !clone[0]; return clone; }); } return ( <div> <button onClick={toggleIsShown}>Toggle</button> { (isShown[0]) ? <em>Element is shown</em> : null } </div> ) } ReactDOM.render(<Example />, document.getElementById("react")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>