Mettre à jour les valeurs de tableau dans React useState Hook

1. Mettre à jour les valeurs du tableau dans le crochet React useState avec useEffect
2. Mettre à jour les valeurs du tableau dans le crochet React useState avec l’événement onClick
3. Mettre à jour les valeurs du tableau dans le crochet React useState avec les événements de la souris
4. Conclusion

Pour un programmeur qui souhaite créer une liste étendue d’options sur son application Web parmi lesquelles les clients pourront choisir, l’utilisation du menu déroulant est l’un des moyens les plus efficaces de le faire. Si nous voulons qu’un client choisisse dans la liste des 10 pays et utilise l’option de bouton radio, cela rendra le site Web encombré et le rendra plus lent.

Mais l’option déroulante rend le site Web simple; même pour une liste de 50 pays, les utilisateurs ne sauront même pas qu’une telle liste est intégrée sur le site Web jusqu’à ce qu’ils cliquent sur l’option.

Il aide également les utilisateurs à sélectionner l’option qu’ils souhaitent avec précision. Ils pourraient également sélectionner leur option plus rapidement, car le menu déroulant permet un raccourci alphabétique.

La flexibilité du framework React nous offre des méthodes différentes mais de premier ordre pour y parvenir. Laissez-nous digérer certaines de ces méthodes.

Mettre à jour les valeurs du tableau dans le crochet React useState avec useEffect

Lorsque nous appliquons la fonction useEffect dans React, elle aide à faire passer l’état de notre composant de son état d’origine à un autre état.

Dans cet exemple, lorsque la page est rendue, il s’agit de l’état d’origine du composant rendu. Ensuite, lorsque nous cliquons pour sélectionner un élément dans la liste déroulante, le composant est passé à un autre état ; c’est le travail de useEffect.

Maintenant, nous allons passer au fichier index.js de notre dossier de projet et écrire ces codes :

Extrait de code - 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);

Production:

Cet exemple montre que la page d’origine est rendue et affiche Select a State. Les listes dans la liste déroulante sont les nouveaux états dans lesquels nous voulons que le composant se déplace.

C’est là que nous définissons ensuite cette instruction lorsque nous affectons le useEffect pour définir l’état de la valeur du tableau allowedState.

Mettre à jour les valeurs du tableau dans le crochet React useState avec l’événement onClick

Cette méthode utilise l’écouteur d’événement onClick pour déplacer le composant de son état initial, Choose One, vers un nouvel état.

Pour commencer, nous devons créer un nouveau fichier, Dropdown.js, dans le dossier src de notre dossier de projet. C’est ici que nous allons définir la fonction de l’écouteur d’événement onClick.

Nous ouvrons ensuite le fichier Dropdown.js dans notre éditeur et écrivons quelques codes :

Extrait de code - 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;

Au moment où nous cliquons sur la liste déroulante, le onClick devient actif et accède immédiatement au composant option que nous avons mappé à l’écouteur d’événement.

Ensuite, nous devons importer le fichier Dropdown.js dans le App.js de notre dossier de projet afin qu’il puisse être rendu.

Extrait de code - 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>
  );
}

Production:

Ici, nous avons importé Dropdown et défini l’état initial de notre composant sur Choose One. C’est ce que l’écouteur d’événement onClick met à jour lorsqu’il devient actif.

Ensuite, nous enveloppons le Dropdown dans la div App afin qu’il puisse être rendu.

Mettre à jour les valeurs du tableau dans le crochet React useState avec les événements de la souris

Cette méthode donne à notre application Web une apparence et un fonctionnement élégants. L’utilisateur n’a qu’à passer la souris sur le menu déroulant, et la liste s’affiche.

Nous appliquerons les événements onMouseEnter et onMouseLeave dans cet exemple. Après avoir créé un nouveau dossier de projet, nous allons créer deux fichiers dans le dossier src : dropdown.js et dropdown.css.

Dans le fichier dropdown.js, nous écrirons ces codes :

Extrait de code - 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;

Nous avons déclaré les événements de la souris dans ce fichier, onMouseEnter, et nous avons déclaré qu’il affiche les éléments dans la liste déroulante en affectant l’événement à showDropdown. Nous avons fait la même chose pour onMouseLeave afin qu’une fois que nous avons éloigné la souris du menu déroulant, les éléments répertoriés soient masqués.

Ensuite, nous devons importer Dropdown dans le fichier App.js et l’envelopper dans la div App. Cela entraînera le rendu de notre composant.

Extrait de code - App.js:

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

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

Pour créer des styles sur la page Web, nous pouvons appliquer le CSS ci-dessous :

.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;
}

Production:

Conclusion

Il n’y a aucun doute quant à l’importance et à l’efficacité de l’utilisation de la fonction de liste déroulante dans React. Une liste déroulante bien conçue rend notre application Web agréable à regarder pendant qu’elle se charge à une vitesse optimale, car le contenu de la liste déroulante n’est pas chargé sur la page Web mais caché derrière une fonction.