Actualizar valores de arrays en React useState Hook

1. Actualizar valores de arrays en React useState Hook con useEffect
2. Actualice los valores del array en React useState Hook con el evento onClick
3. Actualizar valores del array en React useState Hook con eventos de mouse
4. Conclusión

Para un programador que desea crear una lista extendida de opciones en su aplicación web entre las que los clientes podrán elegir, usar el menú desplegable es una de las formas más eficientes de hacerlo. Si queremos que un cliente elija de la lista de 10 países y use la opción del botón de radio, hará que el sitio web se vea congestionado y se muestre más lento.

Pero la opción desplegable hace que el sitio web parezca simple; incluso para una lista de 50 países, los usuarios ni siquiera sabrán que dicha lista está incrustada en el sitio web hasta que hagan clic en la opción.

También ayuda a los usuarios a seleccionar la opción que desean con precisión. También podrían seleccionar su opción más rápido, ya que el menú desplegable permite un atajo alfabético.

La flexibilidad del framework React nos permite disponer de métodos diferentes pero de primera categoría para llevar a cabo esto. Digamos algunos de estos métodos.

Actualizar valores de arrays en React useState Hook con useEffect

Cuando aplicamos la función useEffect en React, ayuda en la transición del estado de nuestro componente de su estado original a otro estado.

En este ejemplo, cuando se representa la página, ese es el estado original del componente representado. Luego, cuando hacemos clic para elegir un elemento del menú desplegable, el componente se ha movido a otro estado; ese es el trabajo de useEffect.

Ahora, nos moveremos al archivo index.js de nuestra carpeta de proyecto y escribiremos estos códigos:

Fragmento de código - index.js:

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const StateSelector = () => {
  const initialValue = [{ id: 0, value: " --- Select a State ---" }];

  const allowedState = [
    { id: 1, value: "Alabama" },
    { id: 2, value: "Georgia" },
    { id: 3, value: "Tennessee" }
  ];

  const [stateOptions, setStateValues] = useState(initialValue);

  console.log(initialValue.length);
  useEffect(() => {
    setStateValues(allowedState);
  }, []);

  return (
    <div>
      <label>Select a State:</label>
      <select>
        {stateOptions.map((localState, index) => (
          <option key={localState.id}>{localState.value}</option>
        ))}
      </select>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<StateSelector />, rootElement);

Producción:

Este ejemplo muestra que la página original se representa y muestra “Seleccionar un estado”. Las listas en el menú desplegable son los nuevos estados por los que queremos que se mueva el componente.

Ahí es donde definimos esta instrucción cuando asignamos el useEffect para establecer el estado del valor del array allowedState.

Actualice los valores del array en React useState Hook con el evento onClick

Este método utiliza el detector de eventos onClick para mover el componente desde su estado inicial, Choose One, a un nuevo estado.

Para comenzar, necesitamos crear un nuevo archivo, Dropdown.js, dentro de la carpeta src de nuestra carpeta de proyecto. Aquí es donde definiremos la función del detector de eventos onClick.

Luego abrimos el archivo Dropdown.js en nuestro editor y escribimos algunos códigos:

Fragmento de código - Dropdown.js:

import { useState } from "react";

function Dropdown({ selected, setSelected }) {
  const [isActive, setIsActive] = useState(false);
  const options = ["Me", "You", "Us"];
  return (
    <div className="dropdown">
      <div className="dropdown-btn" onClick={(e) => setIsActive(!isActive)}>
        {selected}
        <span className="fas fa-caret-down"></span>
      </div>
      {isActive && (
        <div className="dropdown-content">
          {options.map((option) => (
            <div
              onClick={(e) => {
                setSelected(option);
                setIsActive(false);
              }}
              className="dropdown-item"
            >
              {option}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default Dropdown;

En el momento en que hacemos clic en el menú desplegable, el onClick se activa e inmediatamente accede al componente option que hemos asignado al detector de eventos.

A continuación, debemos importar el archivo Dropdown.js a la App.js de nuestra carpeta de proyecto para que pueda renderizarse.

Fragmento de código - App.js

import "./App.css";
import Dropdown from "./Dropdown";
import { useState } from "react";

export default function App() {
  const [selected, setSelected] = useState("Choose One");
  return (
    <div className="App">
      <Dropdown selected={selected} setSelected={setSelected} />
      <br />
      <br />
      <br />
      {selected}
    </div>
  );
}

Producción:

Aquí, importamos Dropdown y configuramos el estado inicial de nuestro componente en Choose One. Esto es lo que actualiza el detector de eventos onClick cuando se activa.

Luego, envolvemos el Dropdown dentro del div App para que pueda renderizarse.

Actualizar valores del array en React useState Hook con eventos de mouse

Este método hace que nuestra aplicación web se vea y funcione de manera elegante. El usuario solo tiene que pasar el mouse sobre el menú desplegable y se muestra la lista.

Aplicaremos los eventos onMouseEnter y onMouseLeave en este ejemplo. Después de crear una nueva carpeta de proyecto, crearemos dos archivos dentro de la carpeta src: dropdown.js y dropdown.css.

Dentro del archivo dropdown.js, escribiremos estos códigos:

Fragmento de código - Dropdown.js

import React, { useState } from 'react'
import './Dropdown.css';

function Dropdown() {
    const [state, setstate] = useState(false);
    const showDropdown=()=>{
        setstate(true);
    }
    const hideDropdown=()=>{
        setstate(false);
    }

    return (
        <div className="dropdown">
        <div className="dropdown-menu" onMouseEnter={showDropdown} onMouseLeave={hideDropdown}>
            Dropdown

            {state ?( <ul className="dropdown-list" onMouseEnter={showDropdown}>
                <li>1st Value</li>
                <li>2nd Value</li>
                <li>3rd Value</li>
                <li>4th Value</li>
                </ul>):
                null}
        </div>
        </div>
    )
}
export default Dropdown;

Declaramos los eventos del mouse en este archivo, onMouseEnter, y declaramos que muestra los elementos en el menú desplegable asignando el evento a showDropdown. Hicimos lo mismo con onMouseLeave para que una vez que alejemos el mouse del menú desplegable, los elementos enumerados estén ocultos.

Luego, debemos importar Dropdown en el archivo App.js y envolverlo dentro del div App. Hacer esto hará que nuestro componente se renderice.

Fragmento de código - App.js:

import React from 'react';
import Dropdown from './Dropdown';

function App() {
    return (
        <div>
            <Dropdown/>
        </div>
    )
}

Para crear algunos estilos en la página web, podemos aplicar el CSS a continuación:

.dropdown {
    height: 2rem;
}
.dropdown-menu{
    width:20rem;
    text-align: center;
    color: black;
    background: lightgray;
    position: relative;
    cursor: pointer;
    padding: 2rem;
}
.dropdown-menu:hover{
    color:white;
    background: gray;
}
.dropdown-list{
    list-style-type: none;
    position: absolute;
    bottom: -7rem;
    left:0;
    width:100%;
    background:gray;
}
.dropdown-list>li{
    border:1px solid transparent;
}
.dropdown-list>li:hover{
    border:1px solid white;
}

Producción:

Conclusión

No hay duda sobre la importancia y la eficacia de utilizar la función desplegable en React. Un menú desplegable bien diseñado hace que nuestra aplicación web sea agradable a la vista mientras se carga a una velocidad óptima, ya que los contenidos del menú desplegable no se cargan en la página web sino que se ocultan detrás de una función.