how to get value from dropdown list in react?

Question

class Navbar extends Component {
  state = {};

  getLink = (e) => {
    const select = document.getElementById("drpdwn");
    console.log(select.value);
  };

  render() {
    return (
      <>
        <div className="container">
          <nav className="navbar navbar-dark bg-primary">
            <div
              id="drpdwn"
              onClick={() => this.getLink()}
              className="dropdown"
            >
              <span className="dropbtn">Dropdown</span>
              <div className="dropdown-content">
                <a value="link1" href="#">
                  Link 1
                </a>
                <a value="link2" href="#">
                  Link 2
                </a>
                <a value="link3" href="#">
                  Link 3
                </a>
              </div>
            </div>
          </nav>
        </div>
      </>
    );
  }
}

export default Navbar;

All I want is whenever a user selects any link such as Link 1,2 or 3 I just want to get the value as simple as that. but all I'm getting is undefined. any suggestions??

Not this is not dropdown issue, this actually is about event propagation — Kayac
– Kayac, Commented Oct 1, 2020 at 14:30

Gucal · Accepted Answer · 2020-10-02 05:15:32Z

1

You can change the code like this and use tags instead of and then tags.

import React, { Component } from "react";

class Navbar extends Component {
  state = {};

  getLink = (e) => {
   const changeValue = e.target.value
   console.log(changeValue )
  };

  render() {
    return (
      <>
        <div className="container">
          <nav className="navbar navbar-dark bg-primary">
            <select
              id="drpdwn"
              onChange={(e) => this.getLink(e)}
              className="dropdown"
            >            
                <option value="link1" href="#">
                  Link 1
                </option>
                <option value="link2" href="#">
                  Link 2
                </option>
                <option value="link3" href="#">
                  Link 3
                </option>
            </select>
          </nav>
        </div>
      </>
    );
  }
}

export default Navbar;

edited Oct 2, 2020 at 5:15

answered Oct 1, 2020 at 14:20

Gucal

9411 gold badge13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gucal Over a year ago

I changed my message. Would you please check again now

Diwanshu Tyagi Over a year ago

I do not want to use select attribute for my dropdown list. I want to use div

Chandelier Axel · Accepted Answer · 2020-10-01 14:16:40Z

0

First, remove the anonymous function inside your onClick, like this :

onClick={this.getLink}

This will automatically pass the event into your function, so (e) will be defined. This is the equivalent of doing :

onClick={(e) => this.getLink(e)}

Once you've done that, you must recover the value inside the event in your function.

getLink = (e) => {
  const value = e.target.value;
  console.log(value);

};

answered Oct 1, 2020 at 14:16

Chandelier Axel

2372 silver badges6 bronze badges

Comments

Kayac · Accepted Answer · 2020-10-01 14:41:06Z

I notice you want to create a navbar with a dropdown list

class Navbar extends Component {
  render() {
    return (
      <>
        <div className="container">
          <nav className="navbar navbar-dark bg-primary">
            <div
              id="drpdwn"
              onClickCapture={(e) => {
                e.preventDefault();

                // e.target which is the target you click within this div
                console.log(e.target);
              }}
              className="dropdown"
            >
              <span className="dropbtn">Dropdown</span>
              <div className="dropdown-content">
                <a href="/">
                  Link 1
                </a>
                <a href="/">
                  Link 2
                </a>
                <a href="/">
                  Link 3
                </a>
              </div>
            </div>
          </nav>
        </div>
      </>
    );
  }
}

German · Accepted Answer · 2020-10-01 14:51:15Z

0

This is how you can do it.

import React, { Component } from "react";

class Navbar extends Component {
  constructor(props) {
    super(props);
    this.ref = React.createRef();
  }

  getLink = ({ target }) => {
    if (target.tagName.toLowerCase() === "a") {
      console.log(target.getAttribute("value"));
    }
  };

  render() {
    return (
      <>
        <div className="container">
          <nav className="navbar navbar-dark bg-primary">
            <div id="drpdwn" onClick={this.getLink} className="dropdown">
              <span className="dropbtn">Dropdown</span>
              <div className="dropdown-content">
                <a value="link1" href="#">
                  Link 1
                </a>
                <a value="link2" href="#">
                  Link 2
                </a>
                <a value="link3" href="#">
                  Link 3
                </a>
              </div>
            </div>
          </nav>
        </div>
      </>
    );
  }
}

export default Navbar;

You may try the demo in codesandbox

https://codesandbox.io/s/gettingthevalue-yeqoi

answered Oct 1, 2020 at 14:51

German

1,16610 silver badges22 bronze badges

1 Comment

German Over a year ago

@DiwanshuTyagi no problem

Collectives™ on Stack Overflow

how to get value from dropdown list in react?

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related