1

Now im working on a small task with a select tag like this

       <select
            name="selectmedgroup"
            id="selectmedgroup"
            value={selectedGroupValue}
            onChange={filterOnSelectChange}
          >
            <option value="" defaultValue hidden>
              -Select Group-
            </option>
            <option value="a">A</option>
            <option value="b">B</option>
            <option value="c">C</option>
            <option value="d">D</option>
           
          </select>

I want to get the value on change. Here is my on change function and state

const [selectedGroupValue, setSelectedGroupValue] = useState();

  const filterOnSelectChange = (e) => {
    setSelectedGroupValue(e.target.value);
    console.log(selectedGroupValue);
  };

Everything seems to work fine but when I log out the selected option first if I choose A for the first time I get undefined on the logs. If I choose B I get A logged out. If I choose C I get B logged out.

I don't think it's my ordering that's wrong. Remember I don't want to have an initial value on the state because this will be just a selection that I will use to filter what the user sees on the page. So for the first time on the component mount, nothing should be filtered.

I have a feeling that the problem is the first Option tag with the -Select Group- . Is there any way I can avoid using that first options tag because it is just like a placeholder whose value I don't need to be selected?

How can I get the correct values? Please help

Amos Machora
  • 486
  • 3
  • 12
  • Does this answer your question? [Why calling react setState method doesn't mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-calling-react-setstate-method-doesnt-mutate-the-state-immediately) –  May 03 '22 at 10:20
  • Note that this is not an issue. The state will have the correct value a few milliseconds after your log command. –  May 03 '22 at 10:21

1 Answers1

1

Try to console your selectedGroupValue on useEffect hook , solve it like this

import React, { useState } from 'react';

const App = () => {
    const [selectedGroupValue, setSelectedGroupValue] = useState();

    const filterOnSelectChange = (e) => {
        setSelectedGroupValue(e.target.value);
    };
    React.useEffect(() => {
        console.log(selectedGroupValue);
    }, [selectedGroupValue]);

    return (
        <>
            <select
                name="selectmedgroup"
                id="selectmedgroup"
                value={selectedGroupValue}
                onChange={filterOnSelectChange}
            >
                <option value="" defaultValue hidden>
                    -Select Group-
                </option>
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
                <option value="d">D</option>
            </select>
        </>
    );
};

export default App;
Hakob Sargsyan
  • 1,294
  • 1
  • 9
  • 15
  • This worked. Can you explain why it did though – Amos Machora May 03 '22 at 12:22
  • 1
    @AmohPrince Because calls to `setState` are asynchronous , it means your `console.log(selectedGroupValue)` won't be wait until `setState` finish , therefore you are get **undefined** , for clear explanation what is happening another way to solve this is ES7 async/await `handleChange: async function(event) {console.log(selectedGroupValue);await setSelectedGroupValue(e.target.value));console.log(selectedGroupValue);}` , it [explanation](https://stackoverflow.com/questions/30782948/why-calling-react-setstate-method-doesnt-mutate-the-state-immediately) will be informative for you – Hakob Sargsyan May 03 '22 at 13:40
  • In React docs also you can read about state [Docs](https://reactjs.org/docs/faq-state.html#what-does-setstate-do) @AmohPrince – Hakob Sargsyan May 03 '22 at 13:43