CODEWITHSUNDEEP
javascriptreactjsreact-hooks
getName
getName

Reputation: 35

How to get and output a value from the select tag

I use a select tag. I would like to be able to read the values from this select tag when I click a button. I have the following problem, if I don't read another value, but leave the first value Argentina, then my output is undefinded. What is the best option to get the value in a variable besides onChange. After all, that only works if the user has selected something.

import React, { useState } from "react";

function Finder() {
  const [selectedValue, setSelectedValue] = useState();

  const find= () => {
    console.log(selectedValue);
  };
  return (
    <div>
      <h1 className="title is-3">Select your option</h1>
      <div className="field has-addons">
        <div className="control is-expanded">
          <div className="select is-fullwidth">
            <select
              name="country"
              onChange={(e) => setSelectedValue(e.target.value)}
            >
              <option value="Argentina">Argentina</option>
              <option value="Bolivia">Bolivia</option>
              <option value="Brazil">Brazil</option>
              <option value="Chile">Chile</option>
              <option value="Colombia">Colombia</option>
              <option value="Ecuador">Ecuador</option>
              <option value="Guyana">Guyana</option>
              <option value="Paraguay">Paraguay</option>
              <option value="Peru">Peru</option>
              <option value="Suriname">Suriname</option>
              <option value="Uruguay">Uruguay</option>
              <option value="Venezuela">Venezuela</option>
            </select>
          </div>
        </div>
        <div className="control">
          <button
            type="button"
            className="button is-primary"
            onClick={() => find()}
          >
            Choose
          </button>
        </div>
      </div>
    </div>
  );
}

export default Finder;

Upvotes: 2

Views: 383

Answers (3)

Ayush Gupta
Ayush Gupta

Reputation: 1227

As @Kinglish said it is a good practice to give a no-value option, it is possible that you don't want the user to see the "Choose your country" in the dropbox. So make this slight change:

<select name="country" value={selectedValue}
onChange={(e) => setSelectedValue(e.target.value)}>
<option value="" disabled hidden>Choose your country</option>              
<option value="Argentina">Argentina</option>

and in your state variable:

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

Upvotes: 0

Luis Sardon
Luis Sardon

Reputation: 514

You need to first set the initial state and then pass it as defaultValue on the select tag.

import React, { useState } from "react";

function Finder() {
  const [selectedValue, setSelectedValue] = useState("Bolivia");

  const find = () => {
    console.log(selectedValue);
  };
  return (
    <div>
      <h1 className="title is-3">Select your option</h1>
      <div className="field has-addons">
        <div className="control is-expanded">
          <div className="select is-fullwidth">
            <select
              name="country"
              defaultValue={selectedValue}
              onChange={(e) => setSelectedValue(e.target.value)}
            >
              <option value="Argentina">Argentina</option>
              <option value="Bolivia">Bolivia</option>
              <option value="Brazil">Brazil</option>
              <option value="Chile">Chile</option>
              <option value="Colombia">Colombia</option>
              <option value="Ecuador">Ecuador</option>
              <option value="Guyana">Guyana</option>
              <option value="Paraguay">Paraguay</option>
              <option value="Peru">Peru</option>
              <option value="Suriname">Suriname</option>
              <option value="Uruguay">Uruguay</option>
              <option value="Venezuela">Venezuela</option>
            </select>
          </div>
        </div>
        <div className="control">
          <button
            type="button"
            className="button is-primary"
            onClick={() => find()}
          >
            Choose
          </button>
        </div>
      </div>
    </div>
  );
}

export default Finder;

Upvotes: 2

Kinglish
Kinglish

Reputation: 23654

It's good practice (and would fix this particular issue) to present the user with a no-value first option in a list.

<select name="country"
onChange={(e) => setSelectedValue(e.target.value)}>
<option value="">Choose your country</option>              
<option value="Argentina">Argentina</option>

Upvotes: 3

Related Questions