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.
472,733
questions
1
vote
0
answers
31
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 ...
-1
votes
2
answers
52
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 /&...
1
vote
1
answer
47
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)) {
...
0
votes
0
answers
12
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 ...
-1
votes
0
answers
25
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/...
0
votes
0
answers
23
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 ...
1
vote
1
answer
62
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 (
&...
-1
votes
0
answers
11
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/...
0
votes
0
answers
18
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 ...
0
votes
1
answer
41
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 ...
0
votes
1
answer
22
views
Next.JS set url path based on 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 ...
0
votes
0
answers
12
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-...
0
votes
2
answers
48
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 (
&...
0
votes
0
answers
28
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 ...
-1
votes
0
answers
23
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 ...
0
votes
2
answers
39
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 ...
-2
votes
0
answers
23
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 ...
0
votes
0
answers
9
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 ...
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 ...
-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) {
...
1
vote
2
answers
50
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 ...
2
votes
3
answers
46
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 ...
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, ...
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 ...
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: ['./...
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 ...
0
votes
1
answer
22
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, ...
0
votes
0
answers
13
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]-...
0
votes
0
answers
14
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 ...
-1
votes
0
answers
28
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 ...
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 ...
-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 ...
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 ...
2
votes
2
answers
67
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 ...
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 ...
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 ...
-2
votes
1
answer
81
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 ...
1
vote
1
answer
40
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 ...
0
votes
2
answers
53
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", "...
0
votes
0
answers
18
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 ...
0
votes
1
answer
61
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 ...
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]-...
0
votes
0
answers
21
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 ...
-1
votes
1
answer
35
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&...
0
votes
1
answer
31
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 = [
[&...
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) =&...
0
votes
2
answers
43
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 ...
0
votes
1
answer
42
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 ...
-1
votes
0
answers
27
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:
&...
0
votes
0
answers
9
views
Is react-google-maps supported in Node 16
We have upgraded our application from Node 12 to 16. But Google Maps is not working now. I hope this package is used by anyone else here. Can you please let me know if react-google-maps is supported ...