Where to initialize semantic ui dropdown menu in a React application?

Question

I am new to React and Semantic UI and have recently noticed that dropdown menus don't work. Where and how do I initialize the Semantic dropdown mudule and other modules?

I googled it and found that Semantic modules you have to initialize, but I don't know where to add the initialize code in my React app.

The code I found is:

$('.ui.dropdown').dropdown();

I tried adding script elements with the code in the 'index.html' file in the 'public' folder but it still didn't work. Then I found out I could add 'simple' in the className and it worked but without any options (selection, button).

I include the Semantic UI css in the index.html file in the public folder:

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    />

A dropdown div in the App file:

<div className='ui dropdown'>
  <div className='text'>Example dropdown</div>
  <i className='dropdown icon' />
  <div className='menu'>
    <div className='item'>Example1</div>
    <div className='item'>Example2</div>
  </div>
</div>

The expected result is to have a dropdown menu on click with 'Example1' and 'Example2' options, but it is just a div with 'Example dropdown' text.

Answer 1

Semantic-UI uses a library called jQuery for DOM manipulation. You can't use jQuery with react (you can read more about that here https://hashnode.com/post/why-is-it-a-bad-idea-to-mix-jquery-and-react-cit77t20z02j5fq536wlyiwtk ) so that makes using the SUI JavaScript impossible but SUI has a react library called semantic-ui-react which allows you to import all the SUI components as react components so you can create your dropdown using the following code

<Dropdown
  placeholder="Example dropdown"
  options={[
    {
      text: "Example1",
      value: "example1"
    },
    {
      text: "Example2",
      value: "example2"
    }
  ]}
/>