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,735
questions
0
votes
0
answers
8
views
Reduce dimension of graph with react-chartjs-2 and chart.js
I'm having a problem. I'm trying to reduce the dimension of a chart (radial or spider, as you want to call it).
As is possible to see from the image here it takes too much space of the page.
I'm ...
0
votes
0
answers
2
views
AG Grid Filtering issue
So we have applied floating filter in second column of ag grid in react by applying the properties: floatingFilter:true,
filter:"agMultiColumnFilter",
Now while we are searching or filtering ...
0
votes
0
answers
3
views
Error:Hydration failed because the initial UI does not match what was rendered on the server
// App.js
"use client";
import React, { useEffect, useMemo, useState } from "react";
import BasicTable from "../components/BasicTable";
import axios from "axios&...
-1
votes
0
answers
10
views
An anchor or button work differently in two different pages
I am building a website with react where I am using same navigation bar in two different pages and the home 'a' tag lands me to the home section is there any way that In different page that home 'a' ...
-2
votes
0
answers
11
views
Redux toolkit. I can’t fix errors in async thunk and reducers after enabling TS strict in tsconfig
Не могу пофиксить ошибки в async thunk и редюсерах после включения TS strict в tsconfig.
Ошибка в редюсере:
enter image description here
Ошибка в thunk:
enter image description here
Thunk ...
0
votes
1
answer
6
views
Astro.js + MDX: Unexpected `ExpressionStatement` in code: only import/exports are supported
I'm trying to write a new blog post with MDX within my Astro.js blog, but it keeps throwing Unexpected ExpressionStatement in code: only import/exports are supported any time I include a React-based ...
0
votes
2
answers
19
views
create-react-app not working in my system
When i try to create my react project it shows an error log
C:\Users\Ezhil & rishii>npx create-react-app firstapp
'rishii\AppData\Roaming\npm\' is not recognized as an internal or external ...
0
votes
0
answers
19
views
Why am I getting a render error while displaying Markers on Map in React Native?
I have been trying to display Markers on the maps using <MapView.Markers> but I have been getting the render error like showing in the image.
So,I am able to display the Map with the zoomed ...
0
votes
0
answers
6
views
React Native Mobile Wallpaper App Design Ideas
I want to publish a react native app. It should be a wallpaper app. Now I am confused from where I should get the wallpapers and where should I store them to show them in my app and how can I set the ...
1
vote
2
answers
47
views
Is there a good way to display a nested JSON object in tabular form in React?
Let's say I have a nested JSON object variable like:
{
"A":{
"a": [1,2],
"b": [3]
},
"B":{
"c":[4],
}
}
And I want it to be ...
0
votes
0
answers
17
views
D3.js AreaChart incorrect graphic plotting
My friends!
I have the AreaChart React component.
If i'm using data which date starts with time u can divide by three it's ok (like 09:00, 12:00 etc.), but if date starts with time u can't divide by 3 ...
-2
votes
0
answers
20
views
Why do we need React Native when we can make a responsive website? [closed]
I am not a beginner in programming and I am not an expert either. I work on creating responsive websites on all screens. I thought about learning React Native, but I asked myself: Why would I learn ...
0
votes
0
answers
19
views
I want to encapsulate a component in the React mini program to implement functional calls, but I cannot pass values to it
const MyToast = (children) => {
console.log("🚀 ~ file: index.js:6 ~ MyToast ~ children:", children.childrn)
return (
<Toast
content={children.children}
visible={...
1
vote
2
answers
39
views
react-otp-input change but it modifies my state because of this I can't login using OTP
I am using 4 digit OTP log-in in my React app and I want to convert the OTP characters to "*" after 0.5 seconds. I am successfully converting my 4 digit OTP to asterisks but it modifies my ...
0
votes
0
answers
10
views
i updated aws amplify from v5 to v6, but unable to find few changes in v6
import React, { useState, useEffect } from 'react';
import { Table } from 'react-bootstrap';
import { Amplify as AmplifyConfig } from 'aws-amplify'; // Import Amplify as AmplifyConfig
import { API, ...
0
votes
1
answer
23
views
React Three useRef returns null in App direction for threejs objects
I am confused of using ref values while doing my threejs app in react. Normally, when we use useRef in any element, it returns exact object after first render. However, while working with threejs ...
0
votes
3
answers
49
views
Number input limiting max length
I have a simple number input in react component. I need to make it not accept more than 4 characters. But it doesn't work with maxLength attribute. What else i can do to prevent it taking more than 4 ...
0
votes
0
answers
7
views
JwksClient getSigningKey Error: socket hang up
Im currently using jsonwebtoken and jwks-rsa for validating token got from request header. Below code will work perfect in local.
const client = jwksClient({
strictSsl: true, // Default value
jwksUri: ...
0
votes
0
answers
10
views
React hydration error when using Apollo Client `useQuery` (Next JS)
Specifically the loading state in my case. During SSR loading is false and during CSR loading is true in the initial render. I show loading UI based on this state so the HTML in server and client is ...
0
votes
0
answers
17
views
Next js change path name based on local
In my next.js project, I want to change the URL based on the locals
This is my default URL for en language
http://localhost:3000/en/privacy-policy
Now if I switch the language en to fr then I want to ...
0
votes
0
answers
9
views
RangeError: Property storage exceeds 196607 properties While fetching file buffer from server
I am creating an app for file storage
When a user uploads the file it is stored in the MongoDB in buffer format
When a user requests the file the same buffer is sent into the response to the user ...
0
votes
0
answers
9
views
Encryption in react and Decryption in django
i'm building a authentication system using react and django, Now i have a problem i want to encrypt password in UI then send it to backend, but i don't know how to decrypt it back in django
I used ...
0
votes
0
answers
20
views
Is this a good way of signing in and redirecting user to home page next js 13 and firebase?
I am working with firebase, cookies and middleware to login user using google ID and redirect user to home page by storing user info in cookies and if cookie is available user gets redirected to home ...
0
votes
0
answers
8
views
React Query Not Syncing with Query Key
I am counting that when the react query key changes, react query would fetch the new query of the new key but it now won't. It is weird because the devtools shows the new key, but it won't actually ...
0
votes
1
answer
34
views
Generating Unique IDs for Rows in React Component - IDs not persisting on renders
I'm working on a React component where I need to generate a unique ID for each row in a table. To achieve this, I'm using the following code:
let uniqueID = 1;
return <td style={{ textAlign: '...
-3
votes
0
answers
30
views
SyntaxError: Unexpected end of JSON input at Signin.js [closed]
There is a problem on my signin part, when i input the correct user email and password from database, the app doesnt work, it doesnt go to anywhere. The console said this:
SyntaxError: Unexpected end ...
-3
votes
0
answers
12
views
Same key needs to push into array from collection [duplicate]
I am working in react latest version.I have a collection data = [{id:1, name:3},{id:2, name:4}] . I want to push all id value to new array . The result should look like this [1, 2].
0
votes
0
answers
24
views
Page not rendering on local host
Hi i am new to the coding world , my page does not render on localhost , It does not give an error message .
I just want to console log my code. How can i achieve this
I want to create a form with ...
0
votes
0
answers
9
views
react ggle recaptcha v3 where is checkbox verification
For npm react-google-recaptcha-v3, if I want the recaptcha's that ask the user to check the box before submitting, do I need to make that myself or is there a pre-built component for it? I imported &...
0
votes
2
answers
51
views
How to change Start time and End time in React?
I have created small time calculation application, I need once select start time 10:00:00 then click add anther row next field start time 11:00:00, how do i change my code could you please check and ...
-1
votes
0
answers
58
views
Create a new array based on multiple arrays using javascript
I have 3 arrays.
My sourceArray is
var sourceArray = [
{
"UserName": null,
"City": "Srinagar",
"Country": &...
0
votes
0
answers
5
views
Img is undefine and after restart project i.e `npm start` it not occurs and works fine?
this error sows sometime
Here are error details
And after restart project i.e npm start it works fine
I searched for it but could not find it's solution. The syntax looks right and works after ...
0
votes
0
answers
3
views
Data and value props in the donut example as in what kind of data and value is passed can someone please give an example for it
enter image description here
Need help with the data and the value props . An example would be very helpful for the same.
I need help with the data and the value prop . An example for data and value ...
0
votes
2
answers
26
views
How to handle editing of dates in input React
I am building a form in React that contains an input of type "date". What is the correct way to handle a backspace/edit to the input? For example, when the state is the date 12/12/1212, and ...
0
votes
1
answer
15
views
MSW does not work in functions within contexts
I'm trying to intercept a post request with MSW to mock the result.
I have a handleLogin function within a context, however, MSW cannot recognize handleLogin as a function. I get the error ...
0
votes
0
answers
15
views
How to scroll to element useScroll framer motion
The scroll is never stay on the top of the element, it always scroll or more pixels than need or less
What's wrong?
I tried react-observers, event listeners, etc. nothing helps
PLEASE SOMEONE HELPPPP
...
0
votes
0
answers
13
views
How to test useStore hocks using vitest
im using react with vitest and want to write a test for the following code.
all im trying to do is to test if the setter and getter inside the click event are working.
import useStore from '../../...
-1
votes
0
answers
19
views
Reactjs option for aspnetboilerplate
Why do they no longer have the reactjs option?
Why do they no longer have the reactjs option? is only have angular for select.
someone know if this will continue or what happend?
Does it have to do ...
0
votes
1
answer
30
views
How is react diffing algorithm faster than manual DOM manipulation?
I love React!
However, I started programming after the advent of React so I never really had the first hand experience of working with vanilla JS for a app in production. So, as I was going down the ...
0
votes
0
answers
11
views
componentsProps -> slotProps change and codemod
I have a little bit of DataGrid code using the now-deprecated components and componentsProps.
I was getting a warning about that from tsserver (in neovim), but am no longer. I'm not sure what that's ...
-1
votes
2
answers
27
views
Redux store state data does not show updated inside a react function component method
I have a simple react function component A which gets data from redux store, once the data is updated from another component B the component A gets the updated data in initial variable declaration to ...
0
votes
1
answer
17
views
Infinity loop on load api data with useReducer and useContext
I'm trying to load the data from my backend API, into my component using the useReducer() hook via a useContext().
However, when running in the browser, this starts an infinite loop.
I'm not sure ...
-1
votes
0
answers
16
views
Is anyway to do a 5 linear gradient on tailwind css (on react)? [closed]
Im trying to do this type of chart (1.0) on react and tailwind. 1.0
But a have no idea how to re create it.
i try reading the docs of tailwind and i see is only a 3 way gradient. My solution was to ...
0
votes
0
answers
17
views
React Query Prefetching Not Working As Expected
I've just started converting my application over to use react query. I'm new to using this library, so I'm not sure if I'm misunderstanding how this is supposed to work, but it seems to me like the ...
1
vote
1
answer
44
views
React Getting error props.auth.data.map not a function after use modal to create a record. Record is added but I need to reload the page to see result
The parent component is a table that shows all the records I have for members in a table. I fetch that data from an API in django. I have a modal that allows me to create a new member. I am able to ...
0
votes
0
answers
10
views
Webm video format disappears in mobile both in android and iPhone in Next.js
Hi I'm using alpha videos in Webm format, everything is working well in desktop, however when it come to iPad or mobile the video is not appearing, this is happening in all browser
below is my code
&...
0
votes
1
answer
25
views
How to create web, mobile, and desktop apps from a common code base? [closed]
I want to create an app for the web (all popular browsers), mobile (Android and iOS), and desktop (Windows, MacOS, and Linux). I know that platform-specific code is unavoidable in that case, but I'm ...
0
votes
0
answers
14
views
How to retrieve user roles using @auth0/nextjs-auth0
I'm using Auth0 to integrate an authentication and user system with Next.js and the @auth0/nextjs-auth0 lib. I've created two roles in the Auth0 dashboard but I'm struggling to find documentation or a ...
1
vote
1
answer
32
views
Actions Must be Plain Objects - React Error
Actions must be a plain object error. The Edit button on the projectList component should trigger a slide out window that displays the details of the project and allows the project to be edited. Once ...
0
votes
2
answers
22
views
Can I use a client component (nav bar) in the root layout of my Next.js app?
I'm using Next.js and I have a root layout file in my app router. However, i'm encountering an error in my <Nav/> component because it's using state to keep track of whether the mobile nav is ...