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

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.

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