React.js to change dropdown value

I’m trying to use React useState to change the value of dropdown value, but it looks like it refreshes the page after onClick has been called. When I click for example on option B, it changes selectedValue state to B, then it re-render the page and reset it to default value. My question is why it re-renders the page? And how can change the dropdown value?

import React, {useState}  from 'react';

function InputDropdown(props) {

const [selectedValue, setSelectedValue] = useState("");

return (
  <div className="input-group">
    <input type="text" className="form-control" />
    <div className="input-group-append">
      <button type="button" className="btn btn-outline-secondary">{selectedValue}</button>
      <button type="button" className="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
        <span className="sr-only">Toggle Dropdown</span>
      </button>
      <div className="dropdown-menu">
        <a class="dropdown-item" href="#" onClick={() =>setSelectedValue("A")}>A</a>
        <a class="dropdown-item" href="#" onClick={() =>setSelectedValue("B")}>B</a>
        <a class="dropdown-item" href="#" onClick={() =>setSelectedValue("C")}>C</a>
      </div>
    </div>
  </div>
)
}

97 thoughts on “React.js to change dropdown value”

  1. When I originally commented I clicked the “Notify me when new comments are added” checkbox and
    now each time a comment is added I get several e-mails with
    the same comment. Is there any way you can remove me from that service?
    Thanks a lot!

    Reply
  2. My spouse and I stumbled over here by a different page and thought I may as well check things out.
    I like what I see so i am just following you. Look forward to checking out your web page for a second time.

    Reply
  3. Great post. I used to be checking continuously
    this blog and I am impressed! Extremely helpful information specifically the remaining part :
    ) I deal with such info much. I was seeking this particular info for a very long
    time. Thanks and good luck.

    Reply
  4. Heya i am for the first time here. I came across this board and I find It truly useful & it helped me out a lot.

    I hope to give something back and aid others like you aided me.

    Reply
  5. I do not even know how I ended up here, but I thought this post was good.

    I do not know who you are but certainly you are going to a famous blogger
    if you are not already 😉 Cheers!

    Reply
  6. I have been exploring for a little for any high-quality articles or
    blog posts on this kind of space . Exploring in Yahoo I ultimately stumbled upon this site.
    Reading this information So i’m happy to show that I have a very good uncanny feeling I found out just what I needed.
    I so much surely will make certain to don?t omit this web site and provides it a look regularly.

    quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

    Reply
  7. Woah! I’m really loving the template/theme of this blog.
    It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between superb usability and appearance.
    I must say you have done a superb job with this. Additionally, the blog loads extremely quick for me
    on Opera. Excellent Blog! ps4 https://j.mp/3z5HwTp ps4

    Reply
  8. Hello there, I believe your blog could possibly be having browser
    compatibility issues. Whenever I look at your web site in Safari, it
    looks fine however when opening in I.E., it’s got some overlapping
    issues. I simply wanted to provide you with a quick
    heads up! Aside from that, great site!

    Reply

Leave a Comment