CODEWITHSUNDEEP
javascripthtmlreactjs
Chitrang Sharma
Chitrang Sharma

Reputation: 274

How to add Link/ a tag in the options of dropdown in React

So basically, I am working on a project I am not so experienced with REACT, I want to make a simple dropdown that will change the Url (simple).

Here is the code-

function Front() {
const [selectedOption, setSelectedOption] = React.useState("A");



if (selectedOption === "A") {
  //Do something here (but what so that I can put that value of selectedOption in the Url?)
 
} else if (selectedOption === "B") {
  //Do something here

} else if (selectedOption === "C"){
    //Do somthing here
 
}

return (
  
<>

    <div className ="front__text">
       <h1>Wind Pioneers</h1> <button>Tutorial</button>
      
    </div>
    <div className="front__text__second">
        <p>Select System</p>
    <select className="drop"  value={selectedOption}
    onChange={evt => setSelectedOption(evt.target.value)}>
        <option value="A" id={1} >1
        
         </option>
         <option value="B" id={2}>
         2
         </option>
         <option value="C" id={3}>
         3
         </option>
    </select>
    </div>
        

    </div>

   
  
   
 </>
)
}

I tried to use but I think Link and anchor tags not works there as this might consider as bad HTML. What should I need to do to get out of this, plus I don't even want to use any external library to do this.

Upvotes: 3

Views: 2424

Answers (1)

Pulsara Sandeepa
Pulsara Sandeepa

Reputation: 945

You have to install popper.js and jquery.js using npm. This will help you:

return (
<div>
  <div class="dropdown">
    <button
      class="btn btn-secondary dropdown-toggle"
      type="button"
      id="dropdownMenuButton"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
    >
      Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    {/*enter the url you want inside href atribute*/}
      <a class="dropdown-item" href="#">
        A
      </a>
      <a class="dropdown-item" href="#">
        B
      </a>
      <a class="dropdown-item" href="#">
        C
      </a>
    </div>
  </div>
</div>
);

Upvotes: 1

Related Questions