Fetching the value on dropdown change in React

Question

I have the following code. Initially, when I select 2022 I don't see the value logged in the console, and also if I select 2021 then '2022' gets logged in the console. I also tried changing the initial state to 2022 by

I tried the below code,

const [selecteddropdown,setdropdown] = useState(2022);

but still, the selected value is not getting printed. What do I need to change?

const Filter = () => {
  const [selecteddropdown,setdropdown] = useState('');
  const handleChange = (event) => {
    setdropdown(event.target.value);
    console.log(selecteddropdown);
  };

  return (
    <div className='expenses-filter'>
      <div className='expenses-filter__control'>
        <label>Filter by year</label>
        <select value={selecteddropdown}  onChange={handleChange}>
          <option value='2022'>2022</option>
          <option value='2021'>2021</option>
          <option value='2020'>2020</option>
          <option value='2019'>2019</option>
        </select>
      </div>
    </div>
  );
};

thug_ · Answer 1 · 2021-06-30T11:00:12.410

2

What you actually see in your log is previously selected value. If you follow reference from @Yoshi comment you can get better understand why that is the case.

To fix it, remove your console.log in handleChange method and instead call it in the block of code from below then you will see actual value of your selecteddropdown.

  useEffect(() => {
    console.log(selecteddropdown);
  }, [selecteddropdown]);

useEffect() hook fires in this case wheneever selecteddropdown state is upaded.

edited Jun 30 '21 at 11:00

answered Jun 30 '21 at 10:45

thug_

893
2
11
31

1

Even if the state update was synchronous, it would not be reflected at that line in the code ([Ref](https://stackoverflow.com/a/68189774/697154)). – Yoshi Jun 30 '21 at 10:47
Ok didn't know that. I am interesting to find out what else would cause it not to show right value in the log call. Could you give us explanation ? – thug_ Jun 30 '21 at 10:50
Follow the link, I explained it there. – Yoshi Jun 30 '21 at 10:50
Cool just saw the link afterwards. – thug_ Jun 30 '21 at 10:50
Thanks @Yoshi you were right I updated answer accordingly. – thug_ Jun 30 '21 at 11:01
@Yoshi : Is there any specific time(in seconds) documented after which we can access the updated state ? Although this is not the same behaviour with input with textbox where instantly we see the updated text in console – User1267 Jun 30 '21 at 11:41
@User1267 No there is not. It's not a *time thing*. You could halt the script for years and it would not matter. Regarding: *"Although this is not the same behaviour with input with textbox where instantly we see the updated text in console"*. I would be happy to see an example of that. – Yoshi Jun 30 '21 at 11:44
@Yoshi: Here is an example of text getting displayed instantly as the user types : const [Title,setTitle] = useState(''); const titleChange = function(event) { setTitle(event.target.value); console.log(Title); } – User1267 Jun 30 '21 at 12:24
@User1267 No, if you closely inspect your example in a running application, you'll see that console.log is always one key press *behind*. – Yoshi Jun 30 '21 at 12:35

score 0 · Answer 2 · answered Jun 30 '21 at 10:40

0

Even if you change the state (selecteddropdown) of the setState, the code line below still shows the state value before it was changed, so this is the right situation. If you want another action after that, you have to develop it with this in mind.

answered Jun 30 '21 at 10:40

Changhoon Lee

143
2
14

Fetching the value on dropdown change in React

2 Answers2