My react state is not changing on select change

Question

I'm trying to change my react state depending on the selected item from my select element, this is my react State :

const [selectedItem, setSelectedItem] = React.useState('');

This is my OnChange function :

const handleSelectChange = (event) => {
      console.log('this is the target value',event.target.value);
      setSelectedItem('hello');
      console.log(selectedItem);
    };

And this is my select element (I'm using the MaterialUI select component) :

<Select autoFous
        onChange={handleSelectChange}
        >
            <MenuItem value='simpleClick'>             
            Simple Click
            </MenuItem>
            <MenuItem value='seleniumClick'>             
            selenium click
            </MenuItem>
        </Select>

What am I doing wrong so my state is not chaning ?

The state value in any given render does not change. setState is asynchronous and the updated value won't be available until the next render cycle. Does this answer your question? [React setState not updating state](https://stackoverflow.com/questions/41446560/react-setstate-not-updating-state) — pilchard, Jun 01 '21 at 01:10

score -1 · Answer 1 · answered Jun 01 '21 at 01:23

It doesn't change instantly value when you use setSelectedItem You can check the changed value after setSelectedItem triggers rerender.

So after you do setSelectedItem('Hello') it will trigger rerender and selectedItem will be changed to 'Hello' on the next render cycle.

My react state is not changing on select change

1 Answers1