React.js to change dropdown value

by

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”

  33. 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

  34. 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

  36. 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

  37. 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

  40. 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

  45. 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

  46. 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

  68. 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