ReactJS useSelect gancho

useSelect es un enlace personalizado proporcionado por el paquete Rooks para React. Es un gancho de selección de lista que ayuda a seleccionar valores de una lista.

Argumentos:

• list: Es del tipo array que describe la lista de elementos para la selección. El valor predeterminado no está definido.
• initialIndex -Es del tipo número que describe el índice seleccionado inicialmente. El valor predeterminado es 0.

Valor de retorno : objeto que contiene los siguientes atributos:

• index: Es del tipo int que describe el índice actualmente seleccionado.
• item : Denota el elemento actualmente seleccionado.
• setIndex:  Es del tipo función que actualiza el índice.
• setItem: Es del tipo función que actualiza el ítem seleccionado.

Módulos Requeridos:

• npm
• crear-reaccionar-aplicacion

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-application demo

Paso 2: después de crear la carpeta de su proyecto, es decir, la demostración, muévase a ella con el siguiente comando:

cd demo

Paso 3: Instale Rooks desde npm.

npm i rooks

Abra la carpeta src y elimine los siguientes archivos:

• logotipo.svg
• setupTests.js
• Aplicación.prueba.js
• índice.css
• informeWebVitals.js
• aplicación.css

Estructura del proyecto: El proyecto debería verse así:

 

Ejemplo: Entendamos el uso de este gancho con un ejemplo de lista.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
  
  
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

import React from "react";
import { useSelect } from "rooks";
  
const list = [
    {
        heading: "Index 0",
        content: " GeeksForGeeks",
    },
    {
        heading: "Index 1",
        content: "GFG",
    },
];
  
function App() {
    const { index, setIndex, item } = useSelect(list, 0);
  
    return (
        <div style={{
            display: "flex",
            flexDirection: "column",
            margin: '20px'
        }}>
            <p style={{
                color: '#c311d6',
                fontSize: '20px',
                margin: '10px',
                fontWeight: 'bold'
            }}>List Example</p>
  
            {list.map((listItem, listItemIndex) => (
                <button
                    key={listItemIndex}
                    style={{
                        background: index === listItemIndex ? 
                            "#bdfca7" : "inherit",
                        width: '300px',
                        color: '#1c23a4',
                        fontSize: '20px',
                        margin: '10px'
                    }}
                    onClick={() => setIndex(listItemIndex)}
                >
                    {listItem.heading}
                </button>
            ))}
            <p style={{
                color: 'green',
                fontSize: '20px',
                margin: '10px',
                fontWeight: 'bold'
            }}>{item.content}</p>
  
        </div>
    );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: