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
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 ...
LordAssalt's user avatar
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 ...
komal varshney's user avatar
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&...
Denyyel's user avatar
  • 41
-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' ...
Hardik's user avatar
  • 9
-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 ...
WarCom's user avatar
  • 1
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 ...
Xevion's user avatar
  • 578
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 ...
Ezhil Sivaraj SR's user avatar
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 ...
vilnius19's user avatar
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 ...
bilal94.'s user avatar
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 ...
JH Lee's user avatar
  • 60
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 ...
Roman Sharapov's user avatar
-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 ...
Phoenix Phoenix's user avatar
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={...
BounceX's user avatar
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 ...
Hamza Anis's user avatar
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, ...
Mark Sushil's user avatar
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 ...
Berkay Çırak's user avatar
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 ...
Konul Memmedova's user avatar
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: ...
Arun Kumar S's user avatar
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 ...
sujan basnet's user avatar
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 ...
A.S.Abir's user avatar
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 ...
Shail Patel's user avatar
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 ...
Panda's user avatar
  • 215
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 ...
alpha_N1618's user avatar
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 ...
Amir Hegazy's user avatar
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: '...
Shrutika Jaiswal's user avatar
-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 ...
Gusthi Edo's user avatar
-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].
anu's user avatar
  • 11
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 ...
Amit Gomes's user avatar
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 &...
henhen's user avatar
  • 1,055
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 ...
Siva MCA's user avatar
-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": &...
Rajitha Ganji IN's user avatar
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 ...
Muhammad Abu Bakar's user avatar
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 ...
Siddharth Litoria's user avatar
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 ...
Omar Imtiaz's user avatar
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 ...
Guilherme Costa's user avatar
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 ...
Potter's user avatar
  • 1
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 '../../...
studentaccount13's user avatar
-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 ...
Alejandro Alberto Cervantes's user avatar
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 ...
Saadman Islam Khan's user avatar
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 ...
dstromberg's user avatar
  • 7,025
-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 ...
Nabeel Ahmed Khan's user avatar
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 ...
Warshow's user avatar
-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 ...
Hamed Manrique's user avatar
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 ...
George Nassar's user avatar
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 ...
Quijote60's user avatar
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 &...
Mirwell's user avatar
  • 13
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 ...
bobeff's user avatar
  • 3,563
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 ...
Fernando Soarez's user avatar
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 ...
Lewis Northcott's user avatar
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 ...
daniel's user avatar
  • 17

1
2 3 4 5
9415