ReactJS useSelect hook

Last Updated : 08 Jun, 2022

The useSelect is a custom hook provided by the Rooks package for React. It is a list selection hook that helps select values from a list.

Arguments:

list: It is of the type array which describes the list of items for the selection. The default value is undefined.
initialIndex -It is of the type number which describes the initially selected index. The default value is 0.

Return Value- Object that contains the following attributes:

index: It is of the type int which describes the currently selected index.
item: It denotes the currently selected item.
setIndex: It is of the type function which updates the index.
setItem: It is of the type function which updates the selected item.

Modules Required:

npm
create-react-application

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-application demo

Step 2: After creating your project folder i.e. demo, move to it using the following command:

cd demo

Step 3: Install Rooks from npm.

npm i rooks

Open the src folder and delete the following files:

logo.svg
setupTests.js
App.test.js
index.css
reportWebVitals.js
App.css

Project Structure: The project should look like this:

Example: Let's understand the use of this hook by a list example.

index.js

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>
);

App.js

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;