Capture any Change in the form - React - reactjs

Question

I have Form with at least 30 inputs.
I want to show a message Do you want to save the changes ? only if there is any change is made by the user, else don't show that message.
The solution i can think of is,
Add onChange event in every input field .
create a boolean state variable like isChanged and initialize with false .
On any onChange event trigger , call a method like handleChange .inside handleChange method , set the value of isChanged variable to True.
If True then show the message else dont.
My Question is, is there any way we can capture onChange from a Form level instead of captureing onChange from individual fields ?

Answer 1

My Question is, is there any way we can capture onChange from a Form
level instead of captureing onChange from individual fields?
Yes, you can use a form element's onChange event handler.
You can add an additional chunk of state to track if the form is dirty or not, and in some callback you where you want to display the message/warning check the dirty state and conditionally display the message.
const [dirty, setDirty] = React.useState(false);
const markFormDirty = () => setDirty(true);
...
/* in some callback */
if (dirty) {
... logic to trigger message ...
}
...
<form onChange={markFormDirty}>
...
</form>
function App() {
const [formKey, setFormKey] = React.useState(0);
const [dirty, setDirty] = React.useState(false);
const markFormDirty = () => setDirty(true);
const resetState = () => {
setFormKey((key) => key + 1);
setDirty(false);
};
const submitHandler = (e) => {
e.preventDefault();
resetState();
};
const resetHandler = (e) => {
e.preventDefault();
if (dirty) {
if (window.confirm("Do you want to save the changes?")) {
window.alert("Saved!");
resetState();
}
}
};
return (
<div className="App">
<h1>
Form key: {formKey} - isDirty?: {dirty ? "yes" : "no"}
</h1>
<form
key={formKey}
onChange={markFormDirty}
onSubmit={submitHandler}
onReset={resetHandler}
>
{Array.from({ length: 10 }, (_, i) => i).map((i) => (
<div key={i}>
<label>
Text {i + 1}
<input id={`test-${i}`} type="text" />
</label>
</div>
))}
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root" />