Questions about Dropdown component

[kev-reth-va]

Given the code below:

1. Why does the second console.log statement show the state before setSelectedState is called? Example:

event:1 App.jsx:12
state:null App.jsx:13
event:2 App.jsx:12
state:1 App.jsx:13

2. Why does the reset button not work?

3. Dropdown's options attribute doesn't seem to be valid. I think it worked in previous versions. I had to resort to using option elements. It's not mentioned in the documentation anymore.

4. Is Dropdown deprecated? It seems to not be mentioned in many documentation locations, such as the official uswds website.

import React, { useState } from 'react';
import { Dropdown } from '@trussworks/react-uswds'

const states = ["1","2"];

function App() {
  const [selectedState, setSelectedState] = useState(null);

  function handleChange(event) {
    const state = event.target.value;
    setSelectedState(state);
    console.log('event:' + state); 
    console.log('state:' + selectedState);
  }
  function handleReset() {
    console.log("reset");
    setSelectedState(null);
  }

  return (
    <div>
      <Dropdown
        options={states}
        selected={selectedState}
        onChange={handleChange}
        label="Select a state"
        name="state"
      >
        <option>- select -</option>
        <option>1</option>
        <option>2</option>
      </Dropdown>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}

export default App;

dependencies:
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@trussworks/react-uswds": "^4.0.0",
"@uswds/uswds": "3.1.0",
"node": "^18.12.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
"yarn": "^1.22.19"
Tested on
Chrome 109.0.5414.74
Firefox 108.0.2

[werdnanoslen]

Why does the second console.log statement show the state before setSelectedState is called?

useState is asynchronous. To get the value immediately, you can get it from useEffect.

Why does the reset button not work?

Neither Select nor a standard <select> would change with the attributes you're using here. To do that, you must change its value prop.

Dropdown's options attribute doesn't seem to be valid. I think it worked in previous versions. I had to resort to using option elements. It's not mentioned in the documentation anymore.

This component has never had an options attribute — you can pass <options> either via the children prop or as you have done it here.

Is Dropdown deprecated? It seems to not be mentioned in many documentation locations, such as the official uswds website.

Yes, we made the change in October (following a deprecation window from May), which itself followed (belatedly) USWDS' rename of the component from Dropdown to Select.

Here's how your code could look with the above edits:

import React, { useState, useEffect } from 'react';
import { Select } from '@trussworks/react-uswds'

const states = ["1","2"];

function App() {
  const [selectedState, setSelectedState] = useState(null);

  function handleChange(event) {
    const state = event.target.value;
    setSelectedState(state);
    console.log('event:' + state);
  }

  useEffect(() => {
    console.log('state:' + selectedState);
  }, [selectedState]);

  
  function handleReset() {
    console.log("reset");
    setSelectedState(null);
  }

  const options = (
    <>
      <option>- select -</option>
      {states.map((state) => (
        <option key={state}>{state}</option>
      ))}
    </>
  );

  return (
    <div>
      <Select
        selected={selectedState}
        onChange={handleChange}
        label="Select a state"
        name="state"
        children={options}
        value={selectedState || ''}
      >
      </Select>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}

export default App;