Get value of select menus when clicking reset button React

I have a set of select menus and I need to find out the values for all of them when I reset them using reset buttons.

The problem is this only works on change event for options and I can’t make it work on reset buttons on the first click as it doesn’t detect the change.

Code sample here:
https://stackblitz.com/edit/react-rmp8kf

import React from 'react';
import { useState } from 'react';
import uuid from 'react-uuid';

export default function Select() {
  const [value, setValue] = useState({
    select1: '',
    select2: '',
  });
  const selectOptions = [
    {
      options: [
        {
          text: 'All',
          value: '0',
        },
        {
          text: 'Blue',
          value: '1',
        },
        {
          text: 'Yellow',
          value: '2',
        },
        {
          text: 'Green',
          value: '3',
        },
      ],
    },
    {
      options: [
        {
          text: 'All',
          value: '0',
        },
        {
          text: 'Black',
          value: '1',
        },
        {
          text: 'White',
          value: '2',
        },
      ],
    },
  ];

  const handleOnChange = (e) => {
    const valueSelected = e.target.value;
    setValue({
      ...value,
      [e.target.name]: valueSelected,
    });
    printAllSelectValues();
  };

  const resetAllSelections = (e) => {
    e.preventDefault();
    setValue({
      select1: '',
      select2: '',
    });
    printAllSelectValues();
  };

  const resetSelection = (e) => {
    e.preventDefault();
    setValue({
      ...value,
      [e.target.dataset.selectName]: '',
    });
    printAllSelectValues();
  };

  const printAllSelectValues = () => {
    const selectMenus = document.querySelectorAll('select');
    selectMenus.forEach((select) =>
      console.log(select.name + '=' + select.value)
    );
  };

  return (
    <form>
      <div>
        <label>
          <select
            name="select1"
            value={value.select1}
            onChange={handleOnChange}
          >
            {selectOptions[0].options.map((option) => (
              <option value={option.value} key={uuid()}>
                {option.text}
              </option>
            ))}
          </select>
        </label>
        <button data-select-name="select1" onClick={resetSelection}>
          Reset
        </button>
      </div>

      <div>
        <label>
          <select
            name="select2"
            value={value.select2}
            onChange={handleOnChange}
          >
            {selectOptions[1].options.map((option) => (
              <option value={option.value} key={uuid()}>
                {option.text}
              </option>
            ))}
          </select>
        </label>
        <button data-select-name="select2" onClick={resetSelection}>
          Reset
        </button>
      </div>

      <button onClick={resetAllSelections}>Reset All</button>
    </form>
  );
}

>Solution :

The stackblitz sandbox you linked seems to do exactly what you need to. You are getting both values correctly when:

1. You select any value in any of the 2 select elements
2. You reset any of the select values individually by using the reset button on the side of each select element
3. You reset both values at once by using the "Reset All" button

What is the problem? Do you want to get the updated values ?

UPDATE

Okey. So react has the nature that every state update is async, meaning that you need to wait for a state update to happen to use its updated values. Now, you cannot use promises or async/await to do this because react is built intentionally this way and gives you the tools to do so. So you need to use the useEffect hook for this.

https://stackblitz.com/edit/react-bekzpz

Note: worth mentioning that you don’t need to grab the data from the HTML elements but in case you want to manipulate DOM elements in react, you are not supposed to do it using the document but by using the useRef hook