479,649 questions
0
votes
0
answers
9
views
Unable to install msal-react in React 19. It fails with below error of peer dependency
The npm install for msal-react for React 19 version fails with peer dependency error. PFB screenshot of the error
1
vote
1
answer
25
views
Keeping state on a react hook
I am still learning react and I currently have an issue where I am trying to create custom hooks and have it make different calls but rentain value of calls already made. Currently, the calls are made ...
- 2,007
1
vote
1
answer
15
views
React testing react-hook-form validation error message
Using "react-hook-form": "^7.45.0" I am doing the field validation. on title, just blur throwing an error as Title is required it works fine.
I am trying to write test for the same,...
- 15.3k
-2
votes
0
answers
23
views
Implement Drag-and-Drop in Both Horizontal and Vertical Directions [closed]
I’m currently working on implementing drag-and-drop functionality in React. I’ve tried using react-beautiful-dnd, but it only supports vertical or horizontal drag-and-drop, not both simultaneously. I ...
-2
votes
0
answers
12
views
Outlook add-in using React and Visual Studio 2022 [closed]
I'm trying to create an outlook add-in using React with Visual Studio 2022 but cannot get it to work
I have tried this link but can't get any of the options to work
Create New Addin using React js(...
- 171
0
votes
0
answers
21
views
Storybook - Element type is invalid: Expected a string
I have check my imports and component name but while running below code in Storybook, getting below error
Element type is invalid: Expected a string ( for built-in components) or a class/function (for ...
- 2,610
0
votes
0
answers
33
views
Deployed React App not loading on Laptop Browsers
I have deployed a React Web App on Azure Static Web App using the free tier with my custom domain. I am able to react the site perfectly fine from mobile devices which includes safari and google ...
0
votes
0
answers
12
views
the toast not displayed on the same layer as my modal
I'm using daisyUI to create a modal like this:
<dialog id="importModal" className="modal z-0">
<div className="modal-box z-0">
<h3 ...
- 33
0
votes
0
answers
19
views
How to block user sign-up when using signInWithPopup when exception is thrown in Firebase Authentication?
I’m using Firebase Authentication with Google Sign-In in my web app. I have a custom signUpWithGoogle method to handle user registration in my custom Backend. However, when calling signInWithPopup, it ...
- 45
1
vote
1
answer
22
views
Horizontal Stack effect while scrolling vertically with css, js
I have been trying to acheive this effect but, have failed to do so.
Effect: https://imgur.com/a/dBvwa3e
Can anyone help me out? This is as much as I have been able to achieve:
Tried Approach:
I have ...
- 11
0
votes
0
answers
13
views
Encountering issue in reusable components with react-multi-carousel
I’m developing a reusable component using react-multi-carousel for a React app. However, when I try to integrate it into a different React application, I encounter an error. Could there be issues with ...
- 151
0
votes
1
answer
20
views
How do I stop text fields inside a table from deselecting when being edited?
I am creating a table listing survey questions when creating a survey for an HR web application. One of the planned features is for the user to be able to modify the text of a question that has ...
- 49
-1
votes
0
answers
15
views
Non-root pages of website return 404 error when doing HTTPS status check [closed]
When I load my website on my browser it works perfectly fine. When I do an HTTPS status check for my website, the root page (mydomain.com/) returns with a 200 Status code. But any non-root page (...
- 85
0
votes
3
answers
61
views
Why is React state variable not reinitialized on re-render
I created a simple React function component.
Here is how it looks:
import React, { useState } from "react";
const Parent = () => {
const [data, setData] = useState("");
...
- 23.8k
0
votes
0
answers
27
views
react-hook-form setValues looses reactivity in nested component
I'm working on a React form using React Hook Form and Zod. Most fields are primitive but there is one that requires an additional nested component. This field is an array and the nested component ...
- 909
0
votes
0
answers
16
views
React Native Gradle Build failure: Cannot sync project due to Kotlin binary version metadata
I am getting this error when trying to sync my android studio project built with react native
/Users/ronaldjones/.gradle/caches/8.12/generated-gradle-jars/gradle-api-8.12.jar!/META-INF/declarative-dsl-...
- 23
1
vote
1
answer
31
views
React - onSubmit and useNavigate Pattern
I'm trying to submit & redirect in React using useCallback but I'm not using the hook properly. What's the pattern for saving data and then redirecting?
const onSubmit = useCallback((data: ...
- 11.2k
0
votes
0
answers
24
views
React typescript type for FieldErrors in form
I'm creating a form using https://react-fcc-forms.vercel.app/
I have an generic Input like this:
const Input = ({ label, type, id, value }: any) => {
const { register, formState: { errors } } = ...
- 11
0
votes
0
answers
12
views
Go to definition does not work in Vscode for the components declared inside index.jsx
I have a component named Messages defined inside this path: components/src/components/common/messages/index.jsx like the below image
I imported the Messages component as shown below image
When I use ...
0
votes
0
answers
11
views
Issue with Animation Skipping Due to Re-rendering
I’m encountering an issue with the following code:
<TabNavigation activeIndex={activeIndex} onTabChange={(index) => setActiveIndex(index)}>
{YoutubeData && ((YoutubeData?.length ??...
- 48
0
votes
0
answers
10
views
Issue with OneDrive Picker V8 Integration: Invalid Client ID and MSAL Authentication Loop
I am attempting to integrate the OneDrive FilePicker V8 in my application. I followed the official documentation: https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/?view=odsp-...
-1
votes
1
answer
19
views
Can u set cookies via express in Next.js server actions?
I am setting cookies via the Express.Js backend server, and the response shows set-cookie, but I am using Next.js 15 on the client, and cookies are not set.
Even though I read somewhere that server ...
0
votes
1
answer
31
views
Why can't I access my backend file that is used for routing(app.php)? [duplicate]
I am making a chat application using PHP on backend and React.js on frontend. However, I am encountering a problem with fetch API.
My fetch that calls an endpoint
fetch('http://localhost/...
- 1
-3
votes
2
answers
55
views
React 19 "ref as prop" and TypeScript
React 19 introduces a new alternative to the existing forwardRef that is called ref as prop:
https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop
But unfortunately the example provided in the blog ...
- 16.7k
-2
votes
0
answers
21
views
Transferring a Django + React Project to a New PC in an Offline Environment Without Reinstalling Dependencies [closed]
I have a full-stack Django and React project that I need to transfer to a new computer in a completely offline environment. My current setup includes:
Django backend with custom app
React frontend
...
- 13
-1
votes
0
answers
20
views
3D Model not Rendering Correctly on Mobile/Tablet Screens with React Three Fiber [closed]
I am trying to render a 3D model using React Three Fiber in my React application. The model renders fine on desktop screens (wider than 768px), but when I test it on mobile/tablet screens (less than ...
0
votes
0
answers
8
views
CSP 'unsafe-inline' client side rendering issue
I am working on a project created using create-react-app and Material-UI for styles and Nginix is redirecting the request to my app. But now I have implemented the CSP header by which all the inline ...
-3
votes
0
answers
30
views
Tracking state when changing routes - Page Loading
Dependencies:
Nextjs v15
Reactjs v18
Prime React v10.8.5(UI Lib)
Typescrpt
Prime Flex
Problem:
I made a basic hamburger menu with prime react components, I want to add a loading animation when a ...
1
vote
1
answer
25
views
How do I display a logarithmic scale in Material UI Slider
I am making an exposure calculator like the one at https://www.camexcalc.com, but remaking the site in React.JS. I am using the Material UI slider. When I make this slider, it is displaying linearly, ...
- 1,561
2
votes
1
answer
18
views
Navbar not showing the changed value when a state changes
i am using same navbar in multiple components. But when the state changes my navbar showing the changed value in login component only , not in the other components.
Navbar Component
import React, { ...
0
votes
0
answers
16
views
How to include tailwindcss styles in Electron app using electron-builer?
I'm developing a simple electron app. I'm using React with vite for the frontend of the app. After adding tailwindcss to the project the application shows just a white page when built as a production ...
- 108
0
votes
0
answers
20
views
TypeError: ajvKeywords is not a function [closed]
Dependencies of the project dependencies using ajv-keywords@^3.5.2. But on building project using react-scripts build it is getting failed with error.
ajvKeywords(ajv, ["instanceof", "...
- 375
0
votes
0
answers
22
views
How can I add a custom button in a React rich text editor that shows/hides an image when clicked?
I am working on a React application and using a rich text editor like Jodit to allow users to add and edit content. I want to add a custom button to the toolbar that, when clicked, inserts an image ...
0
votes
0
answers
12
views
How to retrieve automatic values from the Y-axis in the recharts library?
The domain parameter is responsible for generating values on the Y-axis. If expenses are added, the axis generates 5 points (tickCount={5}) from 0 to the "auto" value, which returns an ...
0
votes
0
answers
15
views
AWS Amplify React App Deployment giving false 404 in console when refreshing paging
I am testing a deployment of a Web App on AWS Amplify and am getting a false 404 reply in console even though the page is showing correctly when you trigger a refresh from the browser.
Format for all ...
- 1
0
votes
0
answers
18
views
Request from React app to Flask server not including cookies
I'm trying to send a get request with cookies from my React app to Flask server. Both are locally hosted with different origin.
Request from react:
export async function fetchUser() {
try {
...
0
votes
0
answers
6
views
Web3Button from Thirdweb-dev/react v4 sdk never loads, when set the active chain to base
i am working on a simple project, im using react v4 sdk , and everithing runds fine, im able to connect the wallet and read data from the users wallet.
but when i set up the web3 button to sing a ...
- 1
-2
votes
1
answer
75
views
Not able to update state while fetching data from localStorage [closed]
const [currentUser, setCurrentUser] = useState(undefined)
useEffect(() => {
async function fetchdata() {
const storedUser = localStorage.getItem("chat-app-user");
if (...
0
votes
0
answers
10
views
Incorrect routing by Dashboard Layout - Material UI?
I'm integrating the Material-UI DashboardLayout into my React project, but I'm running into a routing issue. When I define a segment like "/dashboard/review-files" in the navigation, it ...
- 1
0
votes
0
answers
24
views
Making an Enigma Machine in React [closed]
I am making the plugboard functionality for an enigma machine in React. I currently have a keyboard layout displayed on the screen (a, b, c, d, ...) not qwerty. Regardless, my idea was that a user ...
0
votes
0
answers
13
views
How to restrict re-evaluation of expressions for only those change in values on which the expression depends in survejs?
I am currently using surveyjs within a react app. I have a custom function that returns an uuid value and I invoke that function using an expression in the surveyjs JSON. Now, I have observed the ...
- 177
1
vote
1
answer
17
views
How to stop page theme FLASH in Next.JS 15 using Tailwind CSS and prevent hydration mismatch
Is it possible to implement a successful page theme initialisation without the common flash issue, and whilst also avoiding any hydration mismatch errors?
My solution so far has been to execute ...
- 114
0
votes
1
answer
25
views
Zustand useStore - arg is undefined on re-render
I have a Zustand store that's misbehaving after I login to my app and update the store.
Here's my store:
import {create} from 'zustand'
import {ITRUserInfoDTO, LoginResponse} from "../itr-client&...
- 11.2k
0
votes
0
answers
16
views
bind parameters to callback server function in NextJS 15
I am trying to send a React Server Function as a callback into a client component but the parameters need to be bound before passing the callback.
Basically i want to create a general YesNoModalDialog,...
- 2,955
1
vote
0
answers
24
views
JS, Is there a way web client access file cached date of image url?
I have a react component for thumbnails in client,
export default function Thumbnail({
url,
updatedDate, // updatedDate is from server api
}) {
const cachedDate = new Date(.....);
const ...
- 361
0
votes
0
answers
22
views
Problems with some glowing style on safari
Im having trouble with safari, that makes me that square effect, I don't remember how to fix it!
const getGlowingStyles = (theme: Theme) => {
const glowing = keyframes`
0% { background-...
-1
votes
0
answers
41
views
Issue with CSS for overflow for dropdown
I have created this dummy top nav bar, where i have multiple drop-down which can be scrollable on x axis via buttons if multiple . But when i open the dropdown it is being opened in scroll view for y ...
- 80
1
vote
0
answers
11
views
How to use React SignalR context dependencies prop
I have a component that should connect to SignalR using SignalRContext only once, when redux store updates a "userId" value. I'm trying to achieve that by it's dependencies. Which i ...
- 707
0
votes
0
answers
16
views
React-native-paper InputText black background error
I have this error only on Android, has anyone been able to solve it?
This is my component
export const InputText = ({isPassword=false, showPasswordIcon='eye', hidePasswordIcon='eye-off', ...rest}:...
- 365
0
votes
1
answer
38
views
How can I make a React and Firebase web app more secure?
I built a web app that has authentication with firebase, but I am looking for ways to make it more secure. Functionality includes reading and writing to firebase if you are an authenticated user. All ...
- 7