React: Capture Select Option that is Automatically Set

user_14909922 0
Viewed 101

I have a select box and the options are auto selected depending on your username which works perfectly however Im struggling to figure out a way to capture the value of the auto selected option.

Currently I have a function for onChange that does this but because the values are being auto set, its obviously bypassing the onChange.

Any ideas?

JSX:

        <div class="select">
          <select
            id="ic"
            onChange={(e) =>
              incidentCommand(getIncidentCommander(e.target.value))
            }
          >
            <option selected disabled>
              Incident Commander
            </option>
            {getIcUsername == "ayushl" ? (
              <option value="ayushl" selected>
                Ayush Lal
              </option>
            ) : (
              <option value="ayushl">Ayush Lal</option>
            )}
            {getIcUsername == "BarrieP" ? (
              <option value="barriep" selected>
                Barrie Pocock
              </option>
            ) : (
              <option value="barriep">Barrie Pocock</option>
            )}
            {getIcUsername == "joeld" ? (
              <option value="joeld" selected>
                Joel Douglas
              </option>
            ) : (
              <option value="joeld">Joel Douglas</option>
            )}
            {getIcUsername == "NevashR" ? (
              <option value="nevashr" selected>
                Nevash Reddy
              </option>
            ) : (
              <option value="nevashr">Nevash Reddy</option>
            )}
            {getIcUsername == "SchalkB" ? (
              <option value="schalkb" selected>
                Schalk Burger
              </option>
            ) : (
              <option value="schalkb">Schalk Burger</option>
            )}
          </select>
        </div>

TIA

reactjs javascript
1 Answers

The first thing I want to point is you SHOULD NOT use the selected prop to auto select a default value in a <select>. Rather you should use the JSX's defaultValue prop. With that said, useRef() is one way to get the default value. Here is the idea:

export default function App() {
  const select = useRef();

  useEffect(() => {
    console.log(select.current.value);
  }, []);

  return (
    <div className="App">
      <h1>Select</h1>

      <select ref={select} id="ic" onChange={(e) => console.log("onchange")}>
        <option value="option1">Option 1</option>

        <option value="option2" selected>
          Option 2
        </option>

        <option value="option3">Option 3</option>
      </select>
    </div>
  );
}

Again, I strongly urge you to use the defaultValue prop, so here is the proper way:

...
<select ref={select} id="ic" defaultValue="option2" onChange={(e) => console.log("onchange")}>
        <option value="option1">Option 1</option>
        <option value="option2">
          Option 2
        </option>
...
...

useEffect will show you the pre-selected value on render. You can access that value from any other function the same way: select.current.value

Sandbox: https://codesandbox.io/s/confident-hellman-bceeu?file=/src/App.js

ADDITION:

Here is how to auto-select the specific username:

<select
   id="ic"
   onChange={(e) =>
      incidentCommand(getIncidentCommander(e.target.value))
   }
   defaultValue={getIcUsername.toLowerCase()}
>
    <option disabled>Incident Commander</option>
    <option value="ayushl">Ayush Lal</option>
    <option value="barriep">Barrie Pocock</option>
    <option value="joeld">Joel Douglas</option>
      ...
      ...
</select>

That's all you need.

user_19279910
Related