Questions tagged [reactjs]

React is a JavaScript library for building user interfaces. It uses a declarative, component-based paradigm and aims to be efficient and flexible.

Filter by
Sorted by
Tagged with
0 votes
0 answers
7 views

Pre-session CSRF tokens with React & Express

I am using React for my frontend and Express for middleware, e.g my frontend can call /profile to get the profile for a signed in user. It is also worth noting that the UI is not rendered from Express,...
Omar Dajani's user avatar
0 votes
0 answers
7 views

React-Route Link with react-router-dom V6

When I click on the button of the secondpage, it is added to this landing page at the very bottom(after Footer). The transition comes from the courses page. How do I make the secondpage open as a new ...
Amir Saken's user avatar
0 votes
0 answers
5 views

Jest act wrapper issue

This is my JEST test case. I wrapped my state changing actions into act. But it doesn't help. it('ListInput add item', done => { const valueTyped = '123.1.1.1'; const formItemDataPath = ['...
yevt's user avatar
  • 744
0 votes
0 answers
7 views

Firebase signInWithRedirect, how to detect a redirect properly?

My sign in page currently has the code below. I can successfully use Google sign in, but when it returns to my sign in page before moving to the dashboard, there's a few seconds (or more on slow ...
Max's user avatar
  • 617
0 votes
0 answers
13 views

Remove item from array when cleared from AutoComplete component

I am using Material UI's AutoComplete component where I create n number of TextFields based on the headcount from the rows object. I am having trouble updating the state of the associateList when the ...
PandasM's user avatar
  • 19
0 votes
1 answer
24 views

How to solve "npm ERR! Missing script: "dev" in React Project

When I run npm run dev, it shows me this error in the terminal: npm ERR! Missing script: "dev" npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log ...
Mohammad Uddin's user avatar
-1 votes
0 answers
6 views

In Ionic 7, how do I embed a hamburger menu in my header bar alongside other components?

I'm using Ionic 7 and React 18. I would like to design an Ionic hamburger menu for my application, taht I would like to reside in the upper right of my toolbar. I have designed this Menu.tsx ...
Dave's user avatar
  • 15.1k
0 votes
0 answers
11 views

How to dynamically render images using React Native?

I am currently struggling with rendering some images on my React Native application. Currently, my app is connected to a database, which contains the image file names (ex: 'swipe1') that I want to ...
lulu3010's user avatar
0 votes
0 answers
8 views

R3F issue importing GLB with animations from ReadyPlayerMe and Blender

I exported a character from readyplayer.me as glb, which works fine in R3F. I imported the model into Blender and transformed it into a FBX for mixamo. After I selected the animations I liked I ...
Tilman Porschuetz's user avatar
-2 votes
0 answers
20 views

How to run environment variables with different env files with expo react-native-web?

I try to run different env files with different environment variables with expo react native web. And I am using expo react native web. So not react-native and not reactjs. I cannot find the ...
mightycode Newton's user avatar
0 votes
0 answers
11 views

Repeated delay for debounce hook

I'm working on a react hook to debounce search input requests. Please see my code below: import { useEffect, useMemo, useRef } from "react"; import { debounce } from "lodash"; ...
twinsmaj's user avatar
0 votes
0 answers
11 views

Why react router found no data to work when it is re-rendering?

I was trying to create react routers with tailwind css where a dynamic router also exists. The problem is when i am routing to the dynamic route on clicking a button with id. It works fine but when i ...
Mostafa Ferdaous Nayeem's user avatar
0 votes
0 answers
22 views

infinite re-rending when using custom hook to display notification with notistack

import { useEffect, useCallback } from 'react'; import { useIntl } from 'react-intl'; import { useDispatch, useSelector } from 'react-redux'; import { useSnackbar } from 'notistack'; import { ...
Unah Henry's user avatar
0 votes
0 answers
18 views

How to update the targets for each loop of an anime timeline?

I've got an animation where I'm trying to cycle through an array of strings, animating each one out and the other one in at the same time with opacity and transform: translateY, and it doesn't seem ...
christiancbergstrom's user avatar
0 votes
0 answers
16 views

CORS preflight firebase flask python functions

Error: Access to fetch at 'https://example-uc.a.run.app/' from origin 'https://example.web.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No '...
Felix T's user avatar
  • 15
-1 votes
0 answers
11 views

'SignUp\login\node_modules\.bin\' is not recognized as an internal or external command

I just started with React.js and I am stuch at this problem.I created a react app and when I executed 'npm start' this error 'SignUp\login\node_modules.bin' is not recognized as an internal or ...
SAMYAK KHADSE's user avatar
0 votes
0 answers
20 views

How to make google-oauth2.0 cookie session without using passportjs?

I'm making 'Login to comment' for my blog website and trying to use google-oauth2.0 for authentication. I'm using 'react-oauth/google' and JWT to get users' credentials, passing it to my mongoDB ...
Gaeun Yoo's user avatar
0 votes
0 answers
33 views

How can I change the style of input inside TextInput

I used React-Admin TextInput and I am trying to create a left-to-right input. I used stylish-pugin-rtl package which makes all styled-components right-to-left (probably using scripts). Now I want to ...
Ahmad's user avatar
  • 8,957
0 votes
1 answer
13 views

Browser Router shows blank page when i run build

import logo from './logo.svg'; import './App.css'; import Home from './Home'; import Signup from './Signup'; import Dashboard from './Dashboard'; import Login from './Login'; import { HashRouter ,...
Manish Rai's user avatar
0 votes
0 answers
13 views

Create Binding for Quill package in Rescript React

I recently started rewriting my code in Rescript and although I now know how to bind components provided by packages but I just can’t figure out how to rewrite this code that I used in my React code: ...
Faisal's user avatar
  • 123
0 votes
0 answers
5 views

react native: r3f-native-orbitcontrols: chrome vs firefox and use also for several canvases?

I am relatively new to the native development environment and have encountered an issue in my project, which I was able to reproduce using the example code provided in the r3f-orbitcontrols-example ...
MainzerKaiser's user avatar
0 votes
0 answers
8 views

ESLint no-mixed-spaces-and-tabs errors in React component calls using TypeScript

I've configured ESLint for my TypeScript React project with the following settings: { "root": true, "parser": "@typescript-eslint/parser", "plugins": [ ...
aheed's user avatar
  • 58
0 votes
0 answers
22 views

The value I selected in FormSelect does not appear

My code is like this.I wanted to create a generic FormSelect structure. import axios from "axios" import classnames from "classnames" import { useEffect, useState } from "...
Ulusan's user avatar
  • 1
0 votes
0 answers
29 views

How To Build a Content Creator For A Personal Blog With React? [closed]

I am developing a personal web blog with React JS. I would like to make my own content creator which is a simple page with content editing options. I want the author to be able to save an unfinished ...
VikingUkr's user avatar
0 votes
0 answers
17 views

use redux to handle radix ui controlled dialog

I use radix ui in my react project. It includes dialogs and more which can be controlled by being given a state and a function changing the state to its props "open" and "onOpenChange&...
StayOnBush's user avatar
0 votes
0 answers
14 views

Getting Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider> Even though I have layout wrapped

I am trying to render a next js component by accessing its route. I am using useSelector here, but I am getting this error. After looking up, I found out i have to use a custom provider and wrap it in ...
007 AZx's user avatar
  • 133
0 votes
1 answer
13 views

how to resolve error npm ERR! code ENOENT, npm ERR! syscall lstat?

I want to initialize create-react-app typescript template and get under error npm ERR! code ENOENT npm ERR! syscall lstat npm ERR! path C:\Users\m.namazi\AppData\Roaming\npm npm ERR! errno -4058 npm ...
mojtaba namazy's user avatar
0 votes
0 answers
22 views

Heading styles in react-quill

When I click normal to change heading style, the drop-down heading list menu is opened and closed immediately before I select, how can I get it
Chan's user avatar
  • 1
0 votes
0 answers
26 views

I get undefined in redux devstools for my cart

The issue seems that the 'user' property in the Redux state is initially undefined, and the code is attempting to push onto an undefined value when dispatching the 'addItem' action, I couldn't see t ...
Dave's user avatar
  • 21
0 votes
0 answers
21 views

how to animate width with framer motion

I have the following AdminSidebar component: export const AdminSidebar = ({ children }: { children?: React.ReactNode }) => { const [expanded, setExpanded] = useState(false); const handleClick =...
Merger's user avatar
  • 45
0 votes
0 answers
13 views

React & Cloudflare issue

I added Cloudflare to my React webpage and ever since I've been experiencing a very weird issue - on Safari, loading the page for the first time results in a black page - it doesn't load the js & ...
user1163870's user avatar
0 votes
0 answers
18 views

How to create generic yup object schema?

I have working custom hook form that creates form with a given fields and validates them: import { useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup&...
codeman's user avatar
-1 votes
0 answers
9 views

How to add video as text but to an existing project with a linear-gradient background(look at the EXPLORE text int the image to understand better)

Explore Click on the link above(Explore) for better understanding..I wanted to cut the text from the bg and then position the video behind the bg (using z-index: -2;) to get the result, but i don't ...
Pratyush Kumar's user avatar
0 votes
0 answers
16 views

best possible ways to map response body to typescript interface

I have 2 interfaces in Typescript project: (I have not defined PlaceType and errorcodes here, you can take it as strings) export interface EventDetailProps{ title?: string; summary?: string; ...
Mahesh Gupta's user avatar
0 votes
1 answer
16 views

Framer Motion Infinite Carousel

I'm trying to make an infinitely scrolling carousel of images (each with the same dimensions) in framer motion, but I can't get it to work properly. I want it to smoothly display images moving at the ...
the bezos's user avatar
0 votes
0 answers
35 views

Express CORS server not sending cookie to client in production

In development I am able to send cookies from the server (localhost:5000) to client (localhost:5173). In production the server (https://task-x-server.onrender.com) cannot send cookies to the client (...
userWantsToCode's user avatar
0 votes
1 answer
16 views

What is the best way of giving my customer the opportunity to edit the content of his website (React) by himself?

I am creating a website for a customer who wants to be able to make content changes to it by himself: editing text and pictures over time. I don´t want to develop with wordpress or other CMS but ...
Ross_O's user avatar
  • 3
0 votes
0 answers
7 views

react-leaflet rendering issue

I have a Map react component that renders react-leaflet MapContainer. But it is not being rendered properly. When I zoom in and out the page itself, then it is being rendered properly. If you had ...
Uktamjon's user avatar
0 votes
0 answers
6 views

How to add restrictions in image transformation tools in photoeditorsdk

I have been trying to find a solution to add certain restrictions listed below but unable to find any supportive content in the documentation. Fixing resolution to 1920*1080 and restricting user from ...
Singh's user avatar
  • 11
-1 votes
0 answers
19 views

I am facing error creating react app Showing like react npm

npx create-react-app myapp Creating a new React app in C:\Users\sunda\OneDrive\Desktop\New folder\myapp. Installing packages. This might take a couple minutes. Installing react, react-dom, and react-...
Sundaram Umarvaishya's user avatar
0 votes
0 answers
16 views

ERR_TOO_MANY_REDIRECTS with Next.js on Vercel and Custom Domain on Cloudflare

I'm experiencing an issue with setting up my Next.js project hosted on Vercel with a custom domain managed through Cloudflare. Despite configuring the DNS and SSL settings correctly, I keep running ...
Tom Fan's user avatar
  • 362
-1 votes
1 answer
17 views

@import not showing Fontawesome icons in CSS-in-JS

This was how I was importing Fontawesome icons: src/App.css @import "@fortawesome/fontawesome-free/css/all.css";` When I moved that @import to CSS-in-Js (emotion): src/App.js // JS: const ...
wyc's user avatar
  • 53.8k
0 votes
0 answers
9 views

Framer Motion exit animation with useAnimate() and useEffect() not working

I'm trying to implement exit animation with the new way using useAnimate hook and useEffect but for some reason its not firing up. Here's my code inside the useEffect function: const [scope, animate]...
Ilir's user avatar
  • 548
0 votes
1 answer
19 views

How to log out and clear cookies after jsonwebtoken expires?

Since the lifetime of JWT token is 15 seconds, I want to clear the cookie after that time. But I don't know how to do it properly. Does it need to be done on the server side or can it be done on the ...
Alexsander's user avatar
0 votes
0 answers
12 views

Cannot read properties of undefined (reading 'createElement') on wp.element.createElement

I'm developing a WordPress plugin using ReactJS and I have these two files: index.js: import React from 'react'; import ReactDOM from 'react-dom'; import App from "./App"; document....
Javi Albors's user avatar
0 votes
0 answers
19 views

Cookies are sent on localhost but when deployed on vercel the cookies are not sent

I've created a MERN project wherein I'm sending a jwt token in cookies after user's successfull authentication which works fine on localhost and I can make add, remove, fetch API calls which has ...
Amar Belkar's user avatar
0 votes
0 answers
20 views

Listing out items in React/NextJS with bootstrap cards

My problem is that when I list out my items using cards with bootstrap doesn't matter how I try the cards are always going to be under each other not next to each other. Could someone help me figure ...
Dániel Szalai's user avatar
-1 votes
1 answer
29 views

Error 500 when calling Post method using FastApi on Vercel

I'm using React on the frontend and Fastapi on the backend main.py from typing import Union from fastapi import FastAPI from fastapi.encoders import jsonable_encoder from fastapi.middleware.cors ...
Blog Khóa Học's user avatar
0 votes
0 answers
7 views

Failed to load resources, status 404 gh-pages

I'm trying to deploying my react app, using gh pages. But i'm getting error Failed to load resource: the server responded with a status of 404 () Can someone please help me with resolving this. I ...
Divya's user avatar
  • 1
0 votes
0 answers
9 views

React Ag grid 2 master details in one grid for 2 different columns

I'm trying to create 2 master details in react for 2 columns in one grid (not nested) example picture This is an example that i've seen for vanilla js : https://blog.ag-grid.com/column-drill-down-...
Mizfa_Front's user avatar

1
2 3 4 5
9420