everyone. Im having trouble to access the id that from the dynamic page in Next.js in the Edit project page. This is my folder I have this component so I can navigate to the Edit project page "use client"; import…
In my .tsx file I have this function: const openTabImage = (url: string) => { const newWindow = window.open(); if (!newWindow) { console.error("Failed to open a new tab."); return; } newWindow.opener = null; newWindow.document.body.innerHTML = 'Loading...'; // Placeholder content while…
For this question I have created the following demo Next.js application using the App directory: It has a standard RootLayout in app/layout.tsx. It has a nested Layout in a route group app/(app)/layout.tsx. This layout contains <nav />. It has two…
Trying to use signals to create a shopping cart with local storage. I have two signals, the totalAmount and cart. The totalAmount is reactive, however the cart items aren't. I'm able to retrieve the data from the signal, but if…
I'm encountering an issue in my ReactJS application where, upon navigating to a new page, the page automatically scrolls down to a position below the top of the page instead of starting from the top (generally it takes scroll position…
I need to format text based on provided text specific style using react js. e.g: If text contains this: nBubblenAirnSKY Output: Bubble<br/>Air<br/>SKY<br/> If text contains like this: n-Bubblen-Airn-SKY Output : BubbleAirSKY Here 1 hyphen (-) = one unordered list If…
I'm working on a project using Material UI (MUI) and specifically the DateTimePicker component from the @mui/x-date-pickers package. I'd like to change the colors of the AM/PM buttons. MUI often abstracts styling details and that you have to target specific…
I've been trying to implement smooth scrolling in my Next.js application using the new App Router using the lenis scroll package, but I'm having challenges making it work Here's what I'm trying to do: Enable smooth scrolling on my home…
import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Onboarding from './components/Onboarding/Onboarding'; import Login from './components/Login/Login'; function App() { return ( <Router> <div className="flex justify-center w-[386px] h-[800px] mb-6 mt-5 ml-[35%] box-sizing:border-box rounded-sm overflow-auto -z-50">…
In my client I have: const [error, loginUser, pending] = useActionState(login, null); loginUser gets called from a login form: <form action={loginUser}>....</form> error keeps track of the error returned and if not-null then it shows a toast notification: useEffect(() => {…