In Next.js, the switch button remains in the same state even after the page is refreshed

Is there a solution for this issue? I am currently developing a switch button for a configuration page. The problem arises when I toggle the switch from active to maintenance mode, save it successfully, but upon refreshing the page, the switch reverts back to active status.

[Before refresh][1] [1]: https://i.sstatic.net/eDYQp.png

If you observe the image before refreshing and after refreshing the page, you will notice that the status changes back to active. How can I ensure that the changed status is retained even after page refresh in next js?

Here's the updated code snippet:

import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import { WebConfigurationType, WebConfigType } from '@/type/web'
import { getData, postData, putData } from '@/utility/fetch'
import { showMessage } from '@/components/alerts/showMessage';
...

I have associated this with a JSON schema as follows:

{ "id": "d9cbf36e-bb51-11ee-a740-00155db75f50", "name": "Beranda", "code": "home", "position": 1, "is_maintenance": false }

typescriptnext.jstailwind-css

Answer №1

Begin your code with the following:

import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import { WebConfigurationType, WebConfigType } from '@/type/web'
import { getData, postData, putData } from '@/utility/fetch'
import { showMessage } from '@/components/alerts/showMessage';

Replace it with this snippet:

const React = require('react');
const { useEffect, useState } = require('react');
const { useRouter } = require('next/router');
const { WebConfigurationType, WebConfigType } = require('@/type/web');
const { getData, postData, putData } = require('@/utility/fetch');
const { showMessage } = require('@/components/alerts/showMessage');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Type guard does not narrow down the union type

Explore the following code snippet: type UnionType = 'foo' | 'bar' | 'baz' const obj = { foo: 'huh', bar: 'hmm' } function func(input: UnionType) { if(input in obj) { input } } In ...

typescript

Is there a way in TypeScript to automatically assign object properties to a class in an efficient manner?

Imagine a scenario where I have a unique class structured like this: class Organization { title: string; website: string; location: string constructor() { } } Now, picture retrieving an object from a database that is known to conta ...

typescript

Despite its presence, @Input() remains undefined

Currently, I am engrossed in a project that aims to display information about movies. By utilizing @Input(), I am establishing a connection between the movie details from the parent component (movies) and the child component (movie-detail). Movies Parent ...

angulartypescript

The Next.js dynamic route is being rendered two times

Within my pages/user/[id].jsx file, I have a dynamic route set up. The content of my [id].jsx includes the line console.log(useRouter().query.id);. However, when I visit the URL url/user/5, I notice that initially the console returns undefined and then ...

next.js

At runtime, the array inexplicably becomes null

Having recently ventured into the world of Ionic framework development, I have encountered a puzzling issue. At runtime, an array inexplicably gets nulled and I am struggling to pinpoint the root cause. export interface Days { name:string; } @Compon ...

javascriptangulartypescriptionic-framework

Reactive forms in Angular now support changing focus when the Enter key is pressed

I have successfully created a table and a button that generates dynamic rows with inputs inside the table. One issue I'm facing is that when I press enter in the first input, a new row is created (which works), but I can't seem to focus on the ne ...

javascriptangulartypescript

Is there a way to retrieve video information using the @vimeo/vimeo library in Node.js?

I am struggling to retrieve information about videos from my library, specifically thumbnails and duration. Unfortunately, I keep encountering an error response. My current setup involves using Next.JS and sending my request in getStaticProps, which execu ...

node.jsnext.jsvimeoweb-frontendvimeo-api

Assign a specific value to the sub-component within the grid using Angular 2+

Incorporating Angular 8 and TypeScript into my project, I have a grid that consists of various internal components, one being <ng-select/>. The data binding takes place in the child component during onInit. Upon loading and initialization of the dat ...

angulartypescriptangular-ngselectangular8

An easy method to define argument types for every function type in TypeScript

How can I assign argument types to each function type in TypeScript? Each function has a parameter associated with it. [Example] type F1 = (arg: number) => void; type F2 = (arg: string) => void; const caller = (f: F1 | F2) => (n: number | strin ...

typescript

Which superclass does ReadonlyArray extend from?

Looking at this TypeScript code snippet: const arr: ReadonlyArray<string> = [ "123", "234" ]; arr.push("345"); An error is thrown by the TS compiler: Property 'push' does not exist on type 'ReadonlyArray<string>&apo ...

typescript

Creating an enum in TypeScript can be accomplished by using the enum

What transformations do enums undergo during runtime in the TypeScript environment? Fruit.ts enum Fruit {APPLE, ORANGE}; main.ts let basket = [Fruit.APPLE, Fruit.ORANGE]; console.log(basket); The resulting main.js file remains identical to the .ts ver ...

typescript

"Encountering a 404 error while attempting to forward to an HTML

I've been encountering an issue while trying to transition from a JSX page to an HTML page. Every time I attempt to do so, I receive a 404 error stating that the page doesn't exist. It's puzzling because it is clearly present in my files and ...

javascripthtmlreactjsnext.js

Achieve the same functionality as the nextjs getStaticProps() function across all pages without the need to duplicate the code on each page

Is there a way to implement the functionality of the nextjs getStaticProps() function for all pages without duplicating the code on each page? I have multiple pages and a layout component. I am looking to include a global function on all pages. Is it poss ...

javascriptreactjsnext.js

React Server Component Warning: Server Functions cannot be invoked during the initial rendering stage

In my project, I have a client component named CampaignTable. This component requires a columns object to render the columns. Within the columns object, I include a server component called CampaignActions. The CampaignActions component is responsible for d ...

javascriptreactjsnext.jsnext.js13

The upcoming development does not involve creating an entire HTML webpage using on-demand static site generation (SS

I’m encountering a problem when utilizing getStaticPaths and getStaticProps to create an on-demand SSG for a sharing page. My setup involves Next v12.1.0 and React 17.0.2. After building a specific /[id] page, I can retrieve the data but the HTML output ...

javascriptreactjstypescriptnext.jstsx

Customize buttons in Material UI using the styled component API provided by MUI

I am intrigued by the Material UI Styled Component API, not to be confused with the styled-component library. However, I am facing difficulty in converting my simple button component into a linked button. Can anyone advise me on how to incorporate a react ...

reactjstypescriptmaterial-ui

"X is not compatible with these types of property," but it is not the case

I attempted to instantiate an interface object with properties initialized from another object as follows: id: data.reference.id Even though the properties are compatible, the TypeScript compiler is throwing an error. I am confused about why this is happ ...

typescript

With Next.js14, an error occurs when building with Nodejs20. The application runs smoothly on localhost, but encounters errors during the deployment process, resulting in a 500 internal server error

I recently updated my Node.js version to the latest, which is version 20. After that, I created a new project using Next.js. While it runs fine on my localhost, I encountered errors during the build process even though I didn't change any code. I&apos ...

node.jsnext.jsbuildgcloudupdates

Balancing website speed with capturing product impression

I've been tasked with capturing impressions of all the products visible in the viewport on a website that features thousands of products. To achieve this, I implemented a directory and utilized the IntersectionObserver, which was referenced within the ...

javascriptangulartypescriptintersection-observer

Implement TypeScript to include type annotations on functions' parameters using destructuring and the rest syntax

Issues with Typing in Typescript Trying to learn typing in Typescript has presented some difficulties for me: I am struggling to convert this code into a strongly-typed format using Typescript. const omit = (prop: P, { [prop]: _, ...rest}) => rest; ...

typescripttypescript-typings