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

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 >
  <a  href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

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

CodePudding user response：

You can try with the below code

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

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

CodePudding user response：

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.