# useDropdown

The **useDropdown** hook is used inside the [Dropdown](https://hartans-organization.gitbook.io/hartan-docs/components/dropdown) component. This hook handles the logic inside the Dropdown component.

{% hint style="warning" %}
This hook is an internal hook and is **not available** for the users since it's not exposed as a part of this library.
{% endhint %}

#### Code

{% code overflow="wrap" %}

```javascript
import { useState } from "react";

export default function useDropdown(initialButtonText, onClickFunction){
    const [isOpen, setIsOpen] = useState(false);
    const [dropdownText, setDropdownText] = useState(initialButtonText);

    async function handleDropdownButtonClick(e){
        setIsOpen(!isOpen);
        setDropdownText(e.target.innerText);
        onClickFunction(e.target.innerText);
    }

    return [isOpen, setIsOpen, handleDropdownButtonClick, dropdownText];
}
```

{% endcode %}

#### Explanation

* As you can see above it uses the [useState](https://react.dev/reference/react/useState) hook of the React internally for toggling the state of each accordion label.
*  It accepts two parameters, a initialButtonText(string) and a onClickFunction(function to handle click logic on list items).
* It returns the following:
  * `isOpen`  -> a state value defining the current state of dropdown which is open or close.
  * `setIsOpen`  -> an updater function to update the `isOpen` state value.
  * `handleDropdownButtonClick`  -> a on click handler function given on list items inside the dropdown.
  * `dropdownText`  -> the initial text shown on the dropdown button. After interactivity on items it will be no longer shown.