Alternar valor de estado en React

Desde los primeros días de Internet, los desarrolladores front-end han utilizado JavaScript para agregar funciones dinámicas e interactivas a sus páginas web. En estos días, el proceso de creación de aplicaciones web es muy diferente al de hace 20 años.

Los desarrolladores aún necesitan crear aplicaciones web con características dinámicas e interactivas. Tienden a utilizar marcos basados en JavaScript.

React es especialmente popular para crear interfaces de usuario modernas. Mantiene un estado interno, lo que le permite agregar funciones dinámicas a sus aplicaciones.

Este artículo le mostrará cómo alternar la variable de estado en React.

Alternar valor de estado en React

En React, cada componente tiene un estado. Los desarrolladores a menudo usan el estado para capturar la entrada de los usuarios.

Por ejemplo, hoy en día, es común dar a los usuarios la opción de usar las versiones del sitio web en modo claro o en modo oscuro.

Para implementar esta función en React, tendríamos que establecer una variable de estado nightMode (o cualquier otro nombre de variable descriptivo) en verdadero o falso. Luego, podríamos usar estilo condicional para cambiar los colores de fondo y texto dependiendo del valor actual de esta variable.

Echemos un vistazo a un ejemplo:

export default function App() {
  let [nightMode, setNightMode] = useState(false);
  const applyNightMode = {
    backgroundColor: nightMode ? "black" : "white",
    color: nightMode ? "white" : "black",
    height: "300px"
  };
  return (
    <div className="App" style={applyNightMode}>
      <h1>Hello to our web app</h1>
      <button onClick={() => setNightMode(!nightMode)}>
        Toggle state variable
      </button>
    </div>
  );
}

En este caso, tenemos una variable nightMode establecida en falso por defecto. Sin embargo, queremos darles a los usuarios la opción de usar el modo oscuro, y si a los usuarios no les gusta el modo oscuro, queremos brindarles la opción de volver a la normalidad.

Para eso, necesitamos usar el estado de alternancia de React. Vaya a la demostración en vivo de CodeSandbox para probar el código de ejemplo en acción.

Capturar cambios en los elementos de entrada

En el ejemplo anterior, tenemos el ejemplo más simple: hacer clic en un botón alterna el valor actual de la variable de estado nightMode. Alternativamente, puede usar la casilla de verificación u otro elemento para alternar la variable de estado en React.

Dependiendo de su elemento HTML, debe activar su controlador de eventos para el evento correcto. Para los botones, usamos el atributo onClick para realizar cambios en respuesta a los clics de los usuarios.

Si usa la casilla de verificación, es posible que desee usar el atributo onChange en su lugar.

Actualizar el estado de los componentes de clase

En el ejemplo anterior, usamos el enlace useState() para actualizar la variable de estado en React. Este enlace está disponible solo si ejecuta una versión de React 16.8 o una versión más reciente.

Algunos desarrolladores prefieren escribir componentes de clase, incluso si hay ganchos disponibles.

Los desarrolladores de React tienen prohibido mutar directamente el objeto de estado. Necesitamos usar el método setState() para actualizar el estado en los componentes de la clase.

El argumento debe ser el objeto de estado completo, incluso si solo desea alternar el valor de una propiedad específica. Cambie el valor de una propiedad en particular pero aún pase el objeto completo.

Echemos un vistazo a un ejemplo:

class App extends React.Component {
  constructor() {
  super();
  this.state = {nightMode: false};
  }
  render() {
    const applyNightMode = {
    backgroundColor: nightMode ? "black" : "white",
    color: nightMode ? "white" : "black",
    height: "300px"
  };
    return (
    <div className="App" style={applyNightMode}>
      <h1>Hello to our web app</h1>
      <button onClick={() => setState({nightMode: !this.state.nightMode})}>
        Toggle state variable
      </button>
    </div>
  );
  }
}

Inicializar el estado en los componentes de la clase requiere más líneas de código que los ganchos de los componentes funcionales. Como puede ver, usamos el constructor() para crear el objeto estado inicial.

Usamos el método setState() dentro de JSX para actualizar el valor de la propiedad nightMode. Pasamos el nuevo objeto estado como primer argumento al método setState().

Para alternar el estado en React, establecemos el nuevo valor de la propiedad nightMode en el opuesto del valor actual.

Actualizar el estado de los componentes funcionales

Echemos un vistazo al código de ejemplo de nuevo:

export default function App() {
  let [nightMode, setNightMode] = useState(false);
  const applyNightMode = {
    backgroundColor: nightMode ? "black" : "white",
    color: nightMode ? "white" : "black",
    height: "300px"
  };
  return (
    <div className="App" style={applyNightMode}>
      <h1>Hello to our web app</h1>
      <button onClick={() => setNightMode(!nightMode)}>
        Toggle state variable
      </button>
    </div>
  );
}

El gancho useState() devuelve dos valores: el valor del estado (que almacenamos en la variable nightMode) y la función para actualizar esta variable específica (que se almacena en la variable setNightMode).

Es una convención nombrar sus variables de esta manera: un nombre descriptivo para la variable de estado y luego set+variableName para la función que la actualiza.

La función de controlador para el evento de clic es simple. Usamos el operador opuesto ! y ejecutó la función setNightMode() para establecer el valor de la variable de estado al contrario de lo que es ahora.