How to insert label element in Semantic UI + React Dropdown component?

Question

I would like to recreate the following Dropdown from Semantic UI, in which a <label> is inserted for the dropdown menu using UI React:

(https://semantic-ui.com/collections/form.html#dropdown)

This is the markdown I'd like my React app to create:

<div class="ui form">
  <div class="field">
      <label>Gender</label>
      <div 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>
  </div>
</div>

I'm struggling to accomplish this with the React UI implementation of Semantic UI.

My current attempt is this:

    <Dropdown placeholder='What grade is your child in?' fluid selection 
              options={ grades }
              labeled={ true } 
              name={ `survey_response[grade_${this.state.id}]` } />

It's very important that this is labeled clearly. I've found in user research that the placeholder is confusing as a question prompt alone.

There is documentation for adding a label, however, it requires nesting child components under Dropdown component, which interferes with my use of the "options" prop. Error is as follows:

Warning: Failed prop type: Prop children in Dropdown conflicts with props: options, selection. They cannot be defined together, choose one or the other

Thank you, Stackoverflow!

Answer 1

If you are using it inside a Form you can do:

<Form>
  <Form.Dropdown
    label='Gender'
    options={//your array of options}
    selection
  />
</Form>