React: My App reloads after I click the button

Below is the code of the component that I have written in my application. In this component, I am rendering a form that also has a table which is dynamically generated. The problem is that when I click on the remove button to delete the entry of a table in the form, my app reloads that is not the desired behaviour that I want.

import {ChangeEvent, useState} from 'react';
import { AssetData } from '../../models/asset.model';
export default function  CreateAsset()  {
const  [assetData, setAssetData] =  useState<AssetData>({assetId: "", metaData: [
{"key": "", "value": ""}]});
const handleChange = (event: { target: { name: any; value: any; }; }) => {
const { name, value } = event.target;
setAssetData((prevAssetData) => ({ ...prevAssetData, [name]: value }));
console.log(assetData);
};
const updateMetaData = (event: ChangeEvent<HTMLInputElement>, idx: number) => {
const { name, value } = event.target;
setAssetData((prevAssetData) => {
const newAssetData = { ...prevAssetData, metaData: [...prevAssetData.metaData  ] }
const updatedMetaDataEntry =  { ...newAssetData.metaData[idx], [name]: value }
newAssetData.metaData[idx] = updatedMetaDataEntry
return newAssetData;
});
};
const handleAddMetaData = () => {
setAssetData((prevAssetData) => {
const newAssetData = { ...prevAssetData, metaData: [...prevAssetData.metaData, {"key": "", "value": ""}] }
return newAssetData;
});
};
const handleRemoveMetaData = (idx: number) => {
setAssetData((prevAssetData) => {
const newAssetData = { ...prevAssetData, metaData: [...prevAssetData.metaData  ] }
newAssetData.metaData.splice(idx, 1)
return newAssetData;
});
};
return  (
<form>
<label htmlFor="assetId">Asset ID:</label>
<input type="text" id="assetId" name="assetId" value={assetData.assetId} onChange={handleChange}/>
<br></br>
<label >MetaData:</label>
<table>
<thead>
<tr>
<th>Key</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
{assetData.metaData.map((item, idx) => (
<tr key={idx}>
<td><input type="text" name="key" value={item.key} onChange={(e) => updateMetaData(e, idx)}/></td>
<td><input type="text" name="value" value={item.value} onChange={(e) => updateMetaData(e, idx)}/></td>
{assetData.metaData.length !== 1 && <td><button onClick={(e) => 
{handleRemoveMetaData(idx)}}>Remove</button></td>}
{assetData.metaData.length - 1 === idx && <td><button onClick={handleAddMetaData}>Add</button></td>}
</tr>
))}
</tbody>
</table>
</form>
)};

When I should click on the Remove button, only that table row should be deleted but in my case the entire component reloads. I have noticed one more thing. In the onClick callback attached to the Remove button, if I add e.preventDefault() statement, my code works as expected and only that table row is deleted. Can anyone guide me what is the reason of the strange behaviour.

> In the onClick callback attached to the Remove button, if I add e.preventDefault() statement, my code works as expected and only that table row is deleted.

That's one way to solve the problem, yes. What you're experiencing is not strange behavior, it's default behavior.

Unless otherwise specified, the default type for a <button> element is submit. And the type is not specified in your <button> elements. So they're submit buttons.

Additionally, a <form> with no explicit action will submit to the current URL.

Put these together and what you have are buttons which submit your form, doing nothing more than reloading the current page.

Other options to change this behavior include:

• Add type="button" to the buttons
• Remove the <form> element entirely if you're not planning to use it for anything