CODEWITHSUNDEEP
reactjsbootstrap-5
4seasonn
4seasonn

Reputation: 85

How to capture bootstrap dropdown values in react without third-party libraries?

I am using bootstrap 5.1 without third-party libaries like react-bootstrap or ... in my React App. I am able to see the dropdown button is working properly on my react app but I cannot capture the values on selecting different options of drop down. I tried to replace the <a> tags with <option value='...'> but wasn't successful . Any idea ?

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Upvotes: 1

Views: 517

Answers (2)

Siddharth Bhansali
Siddharth Bhansali

Reputation: 2492

The a tag doesn't support value attribute (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).

Similarly, you can't have option tag without a select/datalist/optgroup (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option).

If you need some type of value associated with the tags anyway, use something like: data-value={your_value}. And then work with the dataset of the element clicked.

Upvotes: 1

Luscious Larry Das
Luscious Larry Das

Reputation: 1

You can try with the below code

export default function App() {
  const onChangeClick = (value) => {
    console.log(value);
  };
  return (
    <div class="dropdown">
      <a
        class="btn btn-secondary dropdown-toggle"
        href="#"
        role="button"
        id="dropdownMenuLink"
        data-bs-toggle="dropdown"
        aria-expanded="false"
      >
        Dropdown link
      </a>

      <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <li>
          <a
            class="dropdown-item"
            href="#"
            onClick={() => onChangeClick("action")}
          >
            Action
          </a>
        </li>
        <li>
          <a
            class="dropdown-item"
            href="#"
            onClick={() => onChangeClick("another action")}
          >
            Another action
          </a>
        </li>
        <li>
          <a
            class="dropdown-item"
            href="#"
            onClick={() => onChangeClick("else action")}
          >
            Something else here
          </a>
        </li>
      </ul>
    </div>
  );
}

Upvotes: 0

Related Questions