How do you implement the dropdown in react?

[fayedbleh13]

Hello, still a noob here in react. maybe someone here could help me. is there a proper way of implementing the dropdown in react the correct way. as of now i followed the documentation where i added the dropdown inside a useEffect. but for some reason whenever i click on the button that has a dropdown. it does not work. i tried clicking it multiple times and it shows a glimpse of the dropdown. so now i'm stuck and i can't figure out why it won't work, or did i miss something from the documentation? anyways any help is appreciated. here is the code maybe you guys can find something.

import { Ripple, Dropdown, initTE } from "tw-elements";

const Header = () => {
    useEffect(() => {
        initTE({ Dropdown, Ripple });
    }, []);

    return (
        <>
            {/* <!-- Main navigation container --> */}
            <nav
                className="flex-no-wrap relative flex w-full items-center bg-neutral-100 py-2 shadow-md shadow-black/5 dark:bg-neutral-600 dark:shadow-black/10 lg:flex-wrap lg:justify-end lg:py-4"
                data-te-navbar-ref
            >
                <div className="flex w-full flex-wrap items-end justify-end px-3">
                    {/* <!-- Right elements --> */}
                    <div className="relative flex items-center">
                        <div class="relative" data-te-dropdown-ref>
                            <button
                                className="flex items-center whitespace-nowrap rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] motion-reduce:transition-none dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                                type="button"
                                id="dropdownMenuButton1"
                                data-te-dropdown-toggle-ref
                                aria-expanded="false"
                                data-te-ripple-init
                                data-te-ripple-color="light"
                            >
                                Dropdown button
                                <span class="ml-2 w-2">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 20 20"
                                        fill="currentColor"
                                        class="h-5 w-5"
                                    >
                                        <path
                                            fill-rule="evenodd"
                                            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                                            clip-rule="evenodd"
                                        />
                                    </svg>
                                </span>
                            </button>`

[xzegga]

Did you solve this issue?

[cipherhell]

I have the same/similar issue, and same initialization with

useEffect(() => {
initTE({ Ripple });
}, []);

although sidebarnav works. I used above in a subcomponent in react

[juujisai]

Hi, there seems to be an issue with initTE not receiving a list of already initiated components. We will have to fix this. For now you can try to make sure that the method was called only once, for example:

  const initialized = useRef(false)

  useEffect(() => {
    setTimeout(() => {
      if (!initialized .current) {
        initTE({ Dropdown })
      }
      initialized .current = true
    }, 500)
  }, []) 

Sorry for the inconvenience.