How to get and output a value from the select tag

user_16052627 0
Viewed 78

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;
react-hooks reactjs javascript
3 Answers

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

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

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

user_157431180
Related