react is not updating functional component state on input change

Question

When i type input and on change editing.hours doesn't update input value but i see updated value in the console.

const nullableEntry = {
    ID: '',
    day: '',
    hours: 0.0,
    note: '',
};

const MonthTable = (props) => {
    const [editing, setEditing] = useState(nullableEntry);

    function handleHoursInput(e) {
        editing.hours = e.target.value;
        setEditing(editing);
    }

    return (
       <input type="number" value={editing.hours} step="0.01" onChange={handleHoursInput} className="form-control" name="" />
    );
};

export default MonthTable;

do not mutate state !!!

Code Maniac
– Code Maniac

2019-08-24 07:09:05 +00:00
Commented Aug 24, 2019 at 7:09 — Code Maniac
– Code Maniac, Commented Aug 24, 2019 at 7:09

Cat_Enthusiast · Accepted Answer · 2019-08-24 07:08:47Z

15

In React, you should avoid doing state-mutations, which means do not explicitly change something belonging to the existing state. In order for React to decide whether or not to re-render to reflect your changes, it needs to register a new-state.

Get in a good habit of creating a clone or deep-copy of the state, and then updating that.

Try something like this instead. In the below, we use the spread operator {...} to clone the state before updating it:

const nullableEntry = {
  ID: "",
  day: "",
  hours: 0.0,
  note: ""
};

const MonthTable = props => {
  const [editing, setEditing] = useState(nullableEntry);

  function handleHoursInput(e) {
    let newEdit = { ...editing };

    newEdit.hours = e.target.value;
    setEditing(newEdit);
  }

  return (
    <input
      type="number"
      value={editing.hours}
      step="0.01"
      onChange={handleHoursInput}
      className="form-control"
      name=""
    />
  );
};

Working sandbox: https://codesandbox.io/s/hopeful-bogdan-lzl76

answered Aug 24, 2019 at 7:08

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vladimir Over a year ago

I usually smash copy and updates in the same line which I believe is a clear marker of the copy's purpose. Like setEditing({ ...editing, hours: e.target.value })

Code Maniac · Accepted Answer · 2019-08-24 07:10:04Z

5

Do not mutate state, editing.hours = e.target.value mutates original state

change your handleHoursInput function to something like this

function handleHoursInput(e) {
    let hours = e.target.value;
    setEditing({...editing, hours});
}

answered Aug 24, 2019 at 7:10

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Comments

Rashid Iqbal · Accepted Answer · 2020-06-06 12:41:48Z

0

you can update state in functional components in this way

const [show, setShow] = useState(false) 
const [scopesData, setScopesData] = useState(scopes)

const submitCallBack = (data) => { 
    setShowhowAlert(true) 
    setScopesData(...scopes, scopes.push({
        id: generateKeyHash(),
        title: data.data.scopetitle,
    }))

}

these 3 lines of codes update the state correctly

  [setScopesData(...scopes, scopes.push({
    id: generateKeyHash(),
    title: data.data.scopetitle,
  }))

answered Jun 6, 2020 at 12:41

Rashid Iqbal

1,26117 silver badges13 bronze badges

Collectives™ on Stack Overflow

react is not updating functional component state on input change

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related