Select field value not changing on setState in onChange

Advertisements

My Select value is gotten from data.RowCount.Value. Changing the value is not reflected until the next render.

const [data, setData] = ({RowCount: {"Value": 5}})

...
<TextField 
    select 
    value={data.RowCount.Value} 
    onChange={(e) => {
        setData((prev) => {
            prev.RowCount.Value = e.target.value; 
            return prev;
        });
    }}>
    <MenuItem>Item</MenuItem>
</TextField>

>Solution :

You’re mutating state, don’t mutate state

Update a nested object

        setData((prev) => ({
           ...prev
           RowCount: {
              ...prev.RowCount,
              value: e.target.value
           }
        }))

Leave a ReplyCancel reply