I have data stored in an array of objects that will be sent through axios PUT. After done with updating data, I want the page to rerender so that it display the current data after update.
Parent component:-
<tbody>
{appSettingsList.map((appSettings, i) => (
<EditButton appSettings={appSettings} i={i} />
))}
</tbody>
first child component:-
const [showEdit, setShowEdit] = useState(false);
return (
<tr key={i}>
<td>{appSettings.appid}</td>
<td>{appSettings.Name}</td>
<td>{appSettings.BackgroundColor}</td>
<td>{appSettings.FontSize}</td>
<td>{appSettings.FontFamily}</td>
<td>{appSettings.Theme}</td>
<td>{appSettings.NavigationBar}</td>
<td className="action-column">
{showEdit ? (
<EditApplicationSettings
appSettings={appSettings}
changeState={(showEdit) => setShowEdit(showEdit)}
/>
) : (
<button
key={i}
className="button-green"
onClick={() => setShowEdit(!showEdit)}
>
Edit
</button>
)}
</td>
</tr>
Second child component (this is where the update occurs)
const [newValue, setNewValue] = useState([]);
const [attributeId, setAttributeId] = useState([]);
let attributes = {
appid: [],
attributeid: [],
newvalue: [],
datemodified: [],
};
function submitUpdate(e) {
e.preventDefault();
for (var i = 0; i < newValue.length; i++) {
attributes.appid = appSettings.appid;
attributes.attributeid = attributeId[i];
attributes.newvalue = newValue[i];
attributes.datemodified = GetCurrentLocalDateTime();
axios
.put(
`http://localhost:8080/application-settings/${appSettings.appid}`,
{
attributes,
}
)
.catch((error) =>
console.log(
"Failed to update employment type data",
error.response.data
)
);
}
Swal.fire({
icon: "success",
title: "Successfully Updated!",
showConfirmButton: false,
timer: 1500,
});
props.changeState(false);
How to make the component rerender without having to force refresh on the whole page?