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

Question

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>

Answer 1

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.

Answer 2

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>
);
}