How to Show Dropdown Menu Semantic UI

Question

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;

Sandip Nirmal · Accepted Answer · 2019-09-07 06:11:01Z

1

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.

answered Sep 7, 2019 at 6:11

Sandip Nirmal

2,48923 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Show Dropdown Menu Semantic UI

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related