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;
State updates in React are asynchronous; when an update is requested, there is no guarantee that the updates will be made immediately. The updater functions enqueue changes to the component state, but React may delay the changes, updating several components in a single pass.
Syntax of setState To make the state change, React gives us a setState function that allows us to update the value of the state. Calling setState automatically re-renders the entire component and all its child components. We don't need to manually re-render as seen previously using the renderContent function.
There are two common reasons why React might not update a component even though its props have changed: The props weren't updated correctly via setState. The reference to the prop stayed the same.
In both class and function components, when updating the state, you should not update it directly. For class components the provided method is setState . For function components, we can use the set state variable we declared when we initialized our state using the React hook useState .
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
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});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With