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.

Please make a Fiddle somewhere for example in JSFiddle so we can take a look easily https://jsfiddle.net/reactjs/69z2wepo/ — asifsaho, Jan 11 '19 at 10:49
@Dhanapal, please provide the fiddle where you are facing issue, as the working fiddle is useless — Piyush Zalani, Jan 11 '19 at 11:26

score 0 · Answer 1 · answered Jan 11 '19 at 10:55

0

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

answered Jan 11 '19 at 10:55

Piyush Zalani

3,686
1
13
29

@Dhanapal, are you planning to go with bootstrap? – Piyush Zalani Jan 11 '19 at 11:01
No. I am using semantic-UI only. As mentioned in this doc https://semantic-ui.com/modules/dropdown.html#/usage it should work if we include the javascript function. But in my jsx page when I include those javascript code it's throwing an error. So I need how to include the JS code properly in jsx page. – Dhanapal Jan 11 '19 at 11:08
@Dhanapal, try to add following in your main html file: . – Piyush Zalani Jan 11 '19 at 11:14
i included this files in index.html and added the JS function in index file. It's not working. I moved the JS function to respective JS file and it's throwing an error as mentioned in the description – Dhanapal Jan 11 '19 at 11:24

Dropdown is not showing the options in react jsx

1 Answers1