CODEWITHSUNDEEP
javascriptreactjs
Diwanshu Tyagi
Diwanshu Tyagi

Reputation: 71

how to get value from dropdown list in react?

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??

Upvotes: 0

Views: 1510

Answers (4)

Gucal
Gucal

Reputation: 923

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;

Upvotes: 1

German
German

Reputation: 1166

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

Upvotes: 0

Kayac
Kayac

Reputation: 54

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>
      </>
    );
  }
}

Upvotes: 0

Chandelier Axel
Chandelier Axel

Reputation: 237

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);

};

Upvotes: 0

Related Questions