CODEWITHSUNDEEP
reactjssemantic-ui
R_C
R_C

Reputation: 353

How to Show Dropdown Menu Semantic UI

I am attempting to make a dropdown menu using Semantic UI that shows itself onclick but do not know how to show it. Right now when I click I just console.log "hi".

import React from "react";

class Dropdown extends React.Component {
  state = {};

  onClick = () => {
    console.log("hi");
  };

  render() {
    return (
      <div onClick={() => this.onClick()} class="ui selection 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="1">
            Male
          </div>
          <div class="item" data-value="0">
            Female
          </div>
        </div>
      </div>
    );
  }
}

export default Dropdown;

Upvotes: 0

Views: 1066

Answers (1)

Sandip Nirmal
Sandip Nirmal

Reputation: 2459

For React you should use semantic-ui-react and not semantic-ui directly.

I am not sure if you have gone through the document or not, but it's available https://react.semantic-ui.com/modules/dropdown/#types-selection. It also contains examples which you can use.

Upvotes: 1

Related Questions