skip to Main Content

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>

2

Answers


  1. You’re mutating state, don’t mutate state

    Update a nested object

            setData((prev) => ({
               ...prev
               RowCount: {
                  ...prev.RowCount,
                  value: e.target.value
               }
            }))
    
    Login or Signup to reply.
  2. you need to update code like this

        setData({RowCount: {"value": e.target.value}}) or
        setData(prev => {return {...prev, RowCount: {"value": e.target.value}}})
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search