Несколько выпадающих в одном и том же компоненте React не работает

Question

Я использовал два раскрывающихся списка из md bootstrap https://mdbootstrap.com/docs/jquery/components/dropdowns/

Но оба раскрывающихся списка имеют одинаковые элементы раскрывающегося списка, почему так? В консоли -> источник я могу видеть различные варианты, но при отображении не отображается, почему так? На скриншотах ниже вы можете видеть, что выпадающие элементы одинаковы, почему это происходит? Я не могу отладить это, потому что в консоли -> источник также он показывает покупки, путешествия и т. Д. c, но не отображается в раскрывающемся списке, почему так?

код:

import React from "react";
import "./transaction.css";

const Transaction = () => {
  return (
    <div className="transactionContainer">
      <h5 class="card-header info-color white-text text-center py-4">
        <strong>Transaction Information</strong>
      </h5>
      <div class="card">
        <div class="card-body px-lg-5 pt-0">
          <form class="text-center" style={{ color: "#757575" }} action="#!">
            <div class="md-form">
              <input type="text" id="amount" class="form-control" />
              <label for="amount">Amount</label>
            </div>

            <button
              class="btn btn-primary dropdown-toggle mr-4"
              type="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              Payment Method
            </button>

            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">
                Cash
              </a>
              <a class="dropdown-item" href="#">
                Debit/Credit Card
              </a>
              <a class="dropdown-item" href="#">
                Net Banking
              </a>
            </div>

            <button
              class="btn btn-primary dropdown-toggle mr-4"
              type="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              Category
            </button>

            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">
                Shopping
              </a>
              <a class="dropdown-item" href="#">
                Travel
              </a>
              <a class="dropdown-item" href="#">
                Entertainment
              </a>
            </div>

            <button
              class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0"
              type="submit"
            >
              Add transaction
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default Transaction;

Скриншоты:

Answer 1

Каждый выпадающий список должен быть заключен в div с классом dropdown, например:

<div className="dropdown">
  <button
    class="btn btn-primary dropdown-toggle mr-4"
    type="button"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Payment Method
  </button>

  <div id="menu1" class="dropdown-menu">
    <a class="dropdown-item" href="#">
      Cash
    </a>
    <a class="dropdown-item" href="#">
      Debit/Credit Card
    </a>
    <a class="dropdown-item" href="#">
      Net Banking
    </a>
  </div>
</div>