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
1 vote
0 answers
29 views

How to make an overlay that exactly covers an object-fit:contain image

Setup: I am provided a container div that can dynamically be any size and an image that can be any size. I want the image to always fit in the center of the container (with allowances for the ...
BobtheMagicMoose's user avatar
-1 votes
2 answers
51 views

How to get past this error in a script in body in next js?

In my _document.js I was adding a script in body and this is the error that is returning ./pages/_document.js Error: x Expected '}', got '' -[50:1] <body> <Main /> <NextScript /&...
Shilajit Dutta's user avatar
1 vote
1 answer
46 views

React.js 18 double effect on mount makes difficult to implement page-in and page-leave logic

Consider this example: const { useEffect } = React; const items = []; const addItem = (item) => { setTimeout(() => { console.log('Adding item', item); if (items.includes(item)) { ...
Maxim Anisimov's user avatar
0 votes
0 answers
11 views

React Native Android biometrics - can I locally authenticate using face lock? From what I see, only fingerprint authentication works

I can set a fingerprint and a face unlock on my Android phone and currently I am trying to check if either is available and biometrically authenticate the user in my application. I am currently using ...
Onyx's user avatar
  • 5,238
-1 votes
0 answers
19 views

Create a basic Social Media Web App using React JS, TypeScript and Ant Design libraries

I need only the frontend part: Sign Up, Log In and Log Out Create a new post (only textual content) View all posts View posts created by the user Like and Bookmark any post Comment on posts Edit/...
Siddharth Goswami's user avatar
0 votes
0 answers
20 views

React add OneSignal to existing ServiceWorker

I am facing probably a quite trivial problem right now. I have an existing React Application with a ServiceWorker that handles caching and other stuff. Now I want to add OneSignal Push Notifications ...
Karl Wolf's user avatar
  • 278
1 vote
1 answer
61 views

Console.log only showing for a split second

Has anyone ever came across this problem? I have stripped my app down completely to basically a shell in a new React app so it's only the layout and a console.log on a button click return ( &...
Kyle's user avatar
  • 13
-1 votes
0 answers
10 views

TypeError: Cannot destructure property 'store' of 'useReduxContext(...)' as it is null

I'm using nextjs 14.0.2 with redux-toolkit. Everything worked fine until I wanted to build my project. I got this incomprehensible error: at useStore (/path-to-project/client/node_modules/react-redux/...
stephaniex's user avatar
0 votes
0 answers
15 views

source map is not generated for some files

I'm encountering an issue in my production environment that I'm trying to debug. To facilitate this process, I need to enable source maps for a project based on ScandiPWA. I've successfully built the ...
Petro Chaikivskyi's user avatar
0 votes
1 answer
37 views

Flutter vs React Native Which One is Better [closed]

Which one should i learn flutter or react native I personally want to learn flutter but i am not sure if i learn react native or flutter which one do you prefer and what is the reason can you help me ...
SongulUyar's user avatar
0 votes
1 answer
19 views

next js multi subdomains on base of user location

I have website in Next JS which has the domain abc.com what I want is when someone visit to my website my website will check the location of the user and get the country code then it will rewrite my ...
Teejaay's user avatar
  • 27
0 votes
0 answers
10 views

CKEditor5 in React not working with a nonce in Content-Security-Policy

I am using CKEditor in a React application using @ckeditor/ckeditor5-react: 5.1.0 and @ckeditor/ckeditor5-build-classic: ^40.1.0. We use Webpack 5. My Content-Security-Policy contains strict-...
KGlickman's user avatar
0 votes
2 answers
41 views

how fix 'is missing in props validation eslint react/prop-types' error?

'name' is missing in props validation eslint react/prop-types 'description' is missing in props validation eslint react/prop-types export default function Note({name,description}) { return ( &...
fatemeh lohrasbi's user avatar
0 votes
0 answers
24 views

Mouse Precision Algorithm Have A Gap On Different Screens For Remote Desktop App Made Made By Electron

Hey I Made My Electron Js Application Its A Combination Of WebRTC Socket IO For Reciver App ( This App Installed on remote pc it send back video stream) Sender APP ( This App also made in electron js ...
BUGS OF 18's user avatar
-1 votes
0 answers
22 views

React App deployed on github pages needs a "hard refresh" to update

I've struggled quite a while to understand why my React App wouldn't update after i'd deploy it and finally figured it out thanks to this post's answer : React App.js doesn't update when making ...
Alex Suto's user avatar
0 votes
2 answers
36 views

Why react renders form for a second before router.push("/")

This is my login page (I use Next.js 14) below. when setSubmitting true - loading spinner render on the page, but for some reason before page actually routes to / home page isSubmitting became false ...
Denys Garbuz's user avatar
-2 votes
0 answers
21 views

Jest testing React component using a component that use hooks imported from a custom component library: Invalid hook call

I have a "custom react component library" and a "react consumer project", both with external react and react-dom ('externals' in webpack.config.js). Both project are in typescript ...
Paolo Biavati's user avatar
0 votes
0 answers
8 views

jest unit tests failing in gitlab pipeline for component using Date.prototype.toLocaleTimeString

I am getting an error Value shortGeneric out of range for Date.prototype.toLocaleTimeString options property timeZoneName for a react component using Date.prototype.toLocaleTimeString in gitlab ...
Rahul Yadav's user avatar
  • 2,697
0 votes
0 answers
12 views

Meteor app is not working with nivo on runtime

I am now responsible for a meteor app. App has UI and server parts. UI part is written in ReactJS. In this app we have a component called AnalyticsDashboard which contains some anayltic data as a ...
Alper Bilgil's user avatar
-1 votes
0 answers
34 views

React input onChange delays function calls

I want to build an upload button for images. However, the functions called before uploading the image are called after the image is uploaded, which makes no sense: function uploadImage(e) { ...
thething23's user avatar
1 vote
2 answers
48 views

It is considered bad practice to use Mongodb ObjectId in the url?

I'm developing a recipe sharing web app using MERN stack, and i was planning to use this kind of url for showing the recipes info ../recipe/:recipeName/:id I wanted to know if it is a bad practice to ...
Macubi's user avatar
  • 13
2 votes
3 answers
43 views

How to redirect user to component of page

So I want when a user clicks the "Contact" link in my NavBar component to navigate to the home page to the specific Contact component. I tried using React-Router-DOM to navigate user to the ...
Konvas's user avatar
  • 33
0 votes
0 answers
19 views

Realizar o 'build' corretamente do React [closed]

Eu tenho um projeto react e gostaria de saber como 'esconder' os fontes no modo desenvolvedor do navegador. Após eu gerar o build de uma aplicação react ele traz na pasta build os arquivos corretos, ...
Mateus da Silva Provensi's user avatar
0 votes
0 answers
26 views

how do i parse typescript code into AST inside the browser? [closed]

I'm current working on a react project that requires to convert a typescript code into AST on client-side but i couldn't find any script or library that could do this. so far i looked up in so many ...
HoseanRC's user avatar
0 votes
0 answers
22 views

How to solve React native config file error

I am following a tutorial on react-native app. I created a react-native.config.js file with the following lines of code module.exports = { project: { ios: {}, android: {}, }, assets: ['./...
Abratemmy's user avatar
0 votes
0 answers
5 views

React : AatomWithStorage from Jotai is not updating value after signing in

first of all, I am newbie in both StackOverFlow and coding ^^. Here are some global informations : BACKEND : Rails 7.0.4 / ruby 3.1.2 FRONTEND : Node v18.18.2 (React) Here is my goal which is pretty ...
Ju lien's user avatar
0 votes
1 answer
19 views

React bubbling with nested onFocus and OnBlur

I have a scenario with three components, each handling onFocus and onBlur separately. While each component works well individually, I'm encountering an issue when they work together as parent, child, ...
Bennyh961's user avatar
0 votes
0 answers
12 views

Facing issues after upgrading nextjs version 13.5.4

Currently i have upgrade my project to nextjs version 13.5.4 and i facing below errors, Uncaught SyntaxError: Unexpected token '!' (at framework-4c4589c9e2596a2b.js:1:65295) [coinSlug]-...
Ajay Geek's user avatar
0 votes
0 answers
13 views

How do I correctly set the middleware for protecting the dynamic path that is the root of the application using next auth

I am using the next-auth package for authentication on my application. I have been able to protect other routes and even other dynamic ones using the middleware.ts file but I am having problems using ...
Idris's user avatar
  • 586
-1 votes
0 answers
25 views

Django REST Framework CORS issue with specific city name "paris"

I'm currently facing a unique issue in my Django REST Framework project related to CORS. Specifically, CORS seems to be blocking requests for a specific city name, "paris," while requests ...
lazy ciao's user avatar
0 votes
0 answers
15 views

React placeholder in input elelemnts flowing out on safari

I am doing my new Web-Dev Portfolio in React. I am facing the problem that I my Contact form the placeholder for the input elements staying inside the input elements how they should be, at least at ...
axmmxa's user avatar
  • 11
-1 votes
0 answers
36 views

Should I redirect to another URL or return another component? [closed]

I have a main page that shows two different views for two different types of users. 1st Approach: Have a main screen with route "main-tool", and when the user is there, it checks which type ...
minasamy's user avatar
0 votes
0 answers
9 views

is there a way in Ag-Grid to have a different order for Columns inside toolpanel compared to Columns in the grid?

I'm trying to find a solution to have a different order for the Coluns inside the toolpanel compared to the ones from the grid-table, for ex. I want the columns in the toolpanel to be sorted ...
vxm's user avatar
  • 13
2 votes
1 answer
52 views

How to visualize 3d cad models and its movementable parts with three.js?

I have a cad model that I want to load with three.js and interact with it. The model is a machine that can perform individual movements. Rotations around joints etc. How can I implement this? How can ...
dlbhar's user avatar
  • 21
0 votes
0 answers
11 views

ReactJS and Cloudscape component Date conversion resulting in error

We are trying to add the initial date as 12/01/2023 for the startDate field, however while converting it in the cloudscape DatePicker component we get the following error: Any help is greatly ...
frp farhan's user avatar
1 vote
1 answer
29 views

How to have a Scrollview inside a fixed View of height "100%" React Native

I would like to have a Scrollview inside a fixed View, so that when I scroll the Scrollview, the rim of the View is still always there (the View is like the frame of the scrolling content). It works ...
Nguyễn Minh's user avatar
0 votes
1 answer
19 views

COSR error in react and drf website but no error in django website?

I have two websites one completely in django and another uses django rest framework and react, I am trying to redirect a to a particular URl and it works fine for the django application but I get ...
Deeksha Sharma's user avatar
-2 votes
1 answer
77 views

Limit the number of onChange triggers

I have this component with a textarea where I set the value to {store.some_property} from the Redux store. My intention is to update the store by dispatching an action using the onChange event on the ...
Vahid's user avatar
  • 272
1 vote
1 answer
38 views

How to read code in a html file using React Js

We have a list of HTML files under the folder src/html in a react project. Now we need to read the menu items with in the HMTL file and display them using a React component. The HTML contains element ...
user2613946's user avatar
0 votes
2 answers
50 views

Weird behviour when trying to update an array in reactjs

import { useRef, useState } from "react"; import "./styles.css"; export default function App() { const [array, setArray] = useState(["apple", "mango", "...
info campus's user avatar
0 votes
0 answers
16 views

ESLint Error: Cannot find module 'resolve/sync'

I have created my own package for personal use, and I am connecting it to the project. Everything works perfectly, except for two things that I can't figure out. Here are the dependencies in my ...
RedCoub's user avatar
0 votes
1 answer
60 views

How to fix signup error when signup was actually successful in Reactjs?

i try to signup in my login page built with react and backend in express js and database is postgres. when i signup using a new email address for the first time, i get An error occured during signup ...
Adesoji Alu's user avatar
0 votes
0 answers
16 views

Getting error after upgrading to nextJS 13

I have upgraded my project to Next.js 13.5.4, but I am continuously getting below errors, Uncaught SyntaxError: Unexpected token '!' (at framework-4c4589c9e2596a2b.js:1:65295) [coinSlug]-...
Ajay Geek's user avatar
0 votes
0 answers
16 views

verifyBeforeUpdateEmail doesn't send verification link

Issue: I'm facing an problem where updating a user's email doesn't trigger the expected email verification link. I've tested this with different email providers, and the verification link isn't being ...
legates's user avatar
  • 17
-1 votes
1 answer
34 views

Not able to access auth state in Redux

I am not getting why I am getting undefined error, can someone help me to fix why I am not able to access auth state? src/queries/authSlice.jsx : import { createSlice } from "@reduxjs/toolkit&...
Sanad Qazi's user avatar
0 votes
1 answer
28 views

problem while rendering dynamic class using tailwind and react

I am rendering a different options of color using dynamic colors in tailwind here is the code: import React from "react"; const Tab1: React.FC = () => { const colorOptions = [ [&...
krish's user avatar
  • 47
1 vote
1 answer
43 views

Deleting event listeners in dynamic React component

Asking advice on adding and deleting event listeners in dynamic react components. So, I have a functional component that has a list of objects. It is being rendered like so: objectList.map( (item) =&...
Alexander Babenko's user avatar
0 votes
2 answers
39 views

Change the color of the text when text is too long (text-overflow: "ellipses")

I would like to change the color of the text when the string is too long. If a string is too long, it will display '...' at the end with the color red otherwise the color will be black. I am not sure ...
Big Ticket's user avatar
0 votes
1 answer
40 views

npm start TypeError Cannot Detect node version

I am trying to run a react app using npm start. I'm using node js 10.24.1 and cannot upgrade it as the project is a legacy project. I tried clear the cache with force, removing node_modules and ...
Myriam AA's user avatar
-1 votes
0 answers
26 views

The title tag was incorrectly rendered into the body tag in React [closed]

I found that my title tag was incorrectly parsed into the body, causing an 24px height blank on the page: enter image description here It should be parsed into the head tag normally。 This is my code: &...
guanzhou bian's user avatar