I wondering why data is not updating while I make DELETE request? Should I change getServerSideProps to getStaticProps or there is other way how to solve this problem? In addition I don't want to reload page :)
const Component = ({ data }) => {
return (
<div>
{data.map((el) => {
return (
<React.Fragment key={el._id}>
<span>{el.visitorDate}</span>
<span>{el.visitorName}</span>
<span>{el.visitorFamilyName}</span>
<div>
<button
onClick={async () => {
const res = await fetch(
`http://localhost:4000/api/visitorData/${el._id}`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
}
);
}}
>
DELETE
</button>
</div>
</React.Fragment>
);
})}
</div>
);
};
export default Component;
export async function getServerSideProps(context) {
const res = await fetch("http://localhost:4000/api/visitorData/");
const data = await res.json();
return {
props: { data },
};
}If something is unclear, let me know :)
You have to update the data after the DELETE request to see your changes.
Either handle this manually in onClick, or add router.refresh() after the fetch.