Dropdown is not showing the options in react jsx

Question

I am using React with Semantic UI. In Semantic UI, we need Javascript to create the dropdown. I am not sure where I have put the JS code.

I tried to put the js file by following this answer: Jquery in React is not defined . but it's throwing an error.

HTML:

<div class="ui dropdown">
    <input type="hidden" name="gender">
    <i class="dropdown icon"></i>
    <div class="default text">Gender</div>
    <div class="menu">
        <div class="item" data-value="male">Male</div>
        <div class="item" data-value="female">Female</div>
     </div>
</div>

Javascript:

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

I need to include JS library to make it work? If yes, where I have to include the library url and above funtion? If no means then what are way to make it work

here is the Fiddle link: http://jsfiddle.net/Dhanapas/4mpb7cfx/2352/ In fiddle it's working but not working when I use it in actual code.

Answer 1

Install semantic-ui-react using:

npm install semantic-ui-react --save

Below is the code to create dropdown with semantic ui:

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

const options = [{ key: 1, text: 'Choice 1', value: 1 }, { key: 2, text: 'Choice 2', value: 2 }]

const DropdownExampleActive = () => <Dropdown text='Dropdown' options={options} open />

export default DropdownExampleActive