How to add a button within a dropdown menu?

Question

I joined an ongoing react project for entering case studies. We are using semantic-ui for forms and form dropdowns. What I want to do is add a button within the drop-down that will initiate another menu.

I want to add the button to this dropdown

I'm unsure of where to add the code for the button or if it's even possible. Here is the current code for the dropdowns:

          <h1 className="ui centered">Select Engagement Details</h1>
          <Form.Group widths="equal">
            <Form.Dropdown
              fluid
              selection
              placeholder="Client Name"
              onChange={(e, { value }) => {
                this.props.handleDropdown({
                  input: "clientName",
                  value: value,
                  optionType: "clientOptions",
                  options: this.state.clients
                });
              }}
              defaultValue={values.clientName}
              options={this.state.clients}
            />

            <Form.Dropdown
              fluid
              selection
              placeholder="Engagement Name"
              onChange={(e, { value }) => {
                this.props.handleDropdown({
                  value: value,
                  input: "engagementName",
                  optionType: "engagementNameOptions",
                  options: this.state.engagements
                });
              }}
              defaultValue={values.engagementName}
              options={this.state.engagements}
            />
          </Form.Group>
          <Button disabled={!isEnabled} onClick={this.saveAndContinue}>
            {" "}
            Continue
          </Button>

          {/* starts new engagement area */}
          <hr style={{marginTop: '30px'}}/>
          <h2 className="ui centered"> New Engagement </h2>

          <Form.Group controlId="newEngagementGroup" widths="equal">
            {/* type is not required. Type is useful for common types like "email" or "password" */}
            <Form.Input 
                  type="clientName" 
                  placeholder="Enter Client Name"
                  ref="newClient"
                  onChange={(e, { value }) => {
                    this.props.handleDropdown({
                      input: "newEngagementClientName",
                      value: value
                    })
                  }}
                  defaultValue={values.newClientName}
            />
            <Form.Input 
                  type="engagementType" 
                  placeholder="Enter Engagement Type"
                  ref="newEngagementType"
                  onChange={(e, { value }) => {
                    this.props.handleDropdown({
                      input: "newEngagementType",
                      value: value
                    })
                  }}
                  defaultValue={values.newEngagementType} />
          </Form.Group>``` 

Answer 1

it's possible:

had your button to your options list

options={[{ key: "ux", text: (<Button>your button</Button>), value: "ux" }]}