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.
470,982
questions
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,...
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 ...
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 = ['...
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 ...
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 ...
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 ...
-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 ...
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 ...
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 ...
-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 ...
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";
...
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 ...
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 { ...
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 ...
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 '...
-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 ...
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 ...
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 ...
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 ,...
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:
...
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 ...
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": [
...
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 "...
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 ...
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&...
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 ...
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 ...
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
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 ...
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 =...
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 & ...
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&...
-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 ...
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;
...
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 ...
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 (...
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 ...
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 ...
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 ...
-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-...
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 ...
-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 ...
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]...
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 ...
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....
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 ...
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 ...
-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 ...
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 ...
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-...