I have a component that uses an object as the state. The object is passed in as a prop. The problem is, I have an input field where there is a cancel button. When the user clicks on the cancel button, I discard all the handleChange events which is saved on the local component state, then just reuse the original prop that was passed in. The text in the input field however, does not reset to the original value and keeps the value that was with the change event.
// Prop structure myObjProp
{id: '', inputText: 'Original String Val'}
const MyComponent = ({myObjProp}) => {
const [objState, setObjState] = useState({...myObjProp})
const {id, inputText} = objState
const handleChange = (e) => setObjState({...objState, inputText: e.target.value})
const handleCancel = () => setObjState(myObjProp) // Should reset `inputText` back to `Original String Val`
return (
<div>
<input onChange={handleChange} />
<button onClick={handleCancel} defaultValue={inputText} >Cancel</button>
</div>
)
}
As an example, when the component first loads, the text in the input
will be Original String Val
. When I then start typing and the input value is something like Original String Val Changed
, after I click the Cancel
button, the text in the input should be Original String Val
which is the original value from the prop and I set in the cancel handler, but text does not revert back and stays as the new text I just typed Original String Val Changed