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
7 views

`getServerSideProps` always returning 404 when deployed on Vercel

I have recently started with NextJs and like it so far. I have an index page where I am having server-side rendering. I have used getServerSideProps to do this. I have the following code in my index....
0 votes
0 answers
10 views

Immutable class with lazy property initialization

I want to create immutable classes using typescript and store them in a state manager. My question is if there is anything wrong with a class design like below, and I mean the lazy initialization of a ...
  • 2,331
0 votes
1 answer
8 views

Dynamically Return Stripe Order Amount

I'm attempting to retrieve the total order amount on a Stripe charge. It's different for every order. I need this value for Google Ads Dynamic conversions. My Question: How to I retrieve/return the ...
0 votes
0 answers
3 views

Upload multiple images to Cloudinary and parses url to Supabase in Nextjs 13

I Want to Upload multiple images to Cloudinary and parses the URLs to Supabase in Nextjs 13 but when clicking Publish button, only 1 image is uploaded. I want to loop through all the media files and ...
0 votes
0 answers
6 views

Make the cookie reachable using a different port than the Express Server

I have an express server running on port 8880 local. The React frontend on port 3000. After logging in a user I want to store the 'access_token' using res.cookie. But that doesn't work locally. I don'...
  • 650
0 votes
0 answers
19 views

How to wait loading processes in a functional component?

I have errors because startGettingMovements() is a function that loads movements. I need to make something to wait the movements to load, and then excecute the rest. export const Stats = ({ period }) =...
0 votes
0 answers
8 views

How to use react-native-blurhash?

How to use react-native-blurhash? Can anyone tell me how can i use react-native-blurhash to make image blur according to that image background color it display blur colors if its loading the image by ...
0 votes
0 answers
10 views

InfoWindow not popping up when I click on the Marker

This is the code that I wrote to populate map, marker, and infowindow const MapContainer = (props) => { const mapStyles = { width: '70%', height: '70%', position: 'relative' }; const [...
0 votes
1 answer
8 views

My react page is blank when i run npm start however there is data within the array on console logs and no errors

I am trying to create a leader board as part of a website project I'm working on. The leader board is pulling data from a spring boot API and pushing it through to the react frontend. However when I ...
0 votes
1 answer
17 views

How to work with refs and useEffect it React

I'm trying to run some code when the ref.current is available, but if I log the value inside the useEffect it's only get triggered once with the value of null. How can I wait/run some code when ref....
  • 109
0 votes
0 answers
11 views

Creating a Dynamically Sourceable QR Code

I have created a page that takes in a URL parameter and creates a QRCode that is displayed on the page. The QRCode is the only thing that is displayed on this page. I am wanting to use this QRCode as ...
  • 3
0 votes
1 answer
6 views

Webpack keeps running , unable to build docker image

terminal is stuck at msg => => # webpack 5.68.0 compiled successfully in 4491 ms docker image building is continueing. my script of start is "start": "webpack serve --config ...
0 votes
0 answers
4 views

How to handle hydration errors caused by browser extensions

As a NextJS newbie, I would like to ask how to deal with the hydration errors caused by browser extensions. My app is working fine - without errors on the console - if I disable all browser extensions ...
  • 2,141
1 vote
1 answer
11 views

What is the difference between BrowserRouter and createBrowserRouter in react-router v6? Can I use createBrowserRouter without using data APIs?

I have read this in the documentation but I am not sure what the difference between BrowserRouter and createBrowserRouter. This is what it says in docs: createBrowserRouter: This is the recommended ...
0 votes
1 answer
19 views

No 'Access-Control-Allow-Origin' header is present on the requested resource - when trying to send email via node.js

When I try to send an email using nodejs and node mailer, sometimes it sends the email, but sometimes it throws the following error below: Access to XMLHttpRequest at 'https://nodejsmailer' from ...
0 votes
0 answers
6 views

React Application MSAL authentication unable to read config values

I have an Azure Static Web App. Since I don’t have enough permission, I’m unable to view the config settings of this app (REACT_APP_AAD_UI_APP_CLIENT_ID, REACT_APP_AAD_API_APP_CLIENT_ID, ...
  • 2,518
0 votes
0 answers
8 views

react how to put tensorflow model in src Folder

i would like to put model.json and other .bin in src/models/ and import them in other file to use but i try many methods ,it doesn't work enter image description here
  • 1
0 votes
0 answers
11 views

Multifiltering objects with checkbox react

Please i need help and it is quite urgent. I am trying to apply a multi filter function using checkboxes. I have been able to sort out the functionality but its not working as it should. Here is how ...
  • 1
0 votes
1 answer
9 views

React Redux Slice Reducer makes Component State readonlu

I have an app which has multiple components in it, one of which is a simple todo list. When a user updates a value in the list, or toggles the task as complete, I want the redux store updated. In my ...
  • 119
0 votes
0 answers
14 views

Unable to scrape Google search result from React app: blocked by CORS policy: No 'Access-Control-Allow-Origin'

I'm trying to scrape some data from a google search following this guide. Running the following in a simple Node.js script works: const axios = require("axios"); const getGymOperatingHours =...
0 votes
0 answers
8 views

NextJS not working with '@types/react' and 'styled-components'

I'm making a application using NextJS with Typescript and NextJS and @types/react keep clashing despite my attempts of changing versions and trying different solutions. Initially, I wouldn't be able ...
  • 1
0 votes
0 answers
7 views

Swiper js get index of slide?

Pardon me if my question is too obvious. What I want to do is get the index of the specific slide I choose (NOT JUST THE CURRENT SLIDE). Looking at the swiper js api on the <SwiperSlide/> ...
0 votes
0 answers
4 views

ReferenceError: TextEncoder is not defined jest, jest-enzyme

I'm trying to test react application with Jest and Enzyme (React v18, Jest v29.4.3, and Enzyme-adapter 16). The tests are simple as shown on the example below: jest.test.file: import React from 'react'...
0 votes
0 answers
6 views

Cannot add data from react application to firebase

`import * as React from 'react'; export default function Notes( {database} ) { let databaseCollection = collection(database, 'notes-data') let userEmail = localStorage.getItem('...
-2 votes
0 answers
18 views

What widget is this in React / Material-UI?

I'm seeing this in a number of mockups at my job but I'm unable to locate it. I checked out Switch on material UI but that seems to require a lot of customization to implement. I'm open to finding one ...
0 votes
1 answer
19 views

Don't let long text in child extent parent vertically

I create a React App (with MUI) which contains a list of descriptions (red box = title, blue box = description). My goal is that each item has the same height and that the text inside the blue box ...
  • 441
0 votes
0 answers
12 views

Old Create React App with ES6 combined with TypeScript not showing type errors

We have a project that is created with Create React App, and we want to migrate to use TypeScript (start with a few files). I have done this: npm install --save typescript @types/node @types/react @...
  • 862
0 votes
0 answers
6 views

React Aria Combobox does not filter the entries based on the input

Hello I'm using the Combobox from React aria I have followed official docs however once I enter something in the input there is no filtering happening. For instance if you write PHP in the combobox it ...
  • 2,787
0 votes
0 answers
15 views

400 bad PUT request using RTK query and strapi rest api

so am creating a crud app using strapi rest api as my backend end, but am a new react developer and I cant seem to handle put requests to update the api response. it works succesfully in postman but ...
0 votes
0 answers
13 views

User.insertMany is not a function

this is the code import express from 'express'; import User from './Models/UserModel.js'; import users from './data/users.js'; const ImportData = express.Router(); ImportData.post('/user', async (...
0 votes
0 answers
9 views

Lexical Editor with react to detect word postion

I'm trying to use Lexical editor with react to implement a text editor "similar to the Grammarly concept" to send each typed word with its index on socket. I need to know what is the best ...
2 votes
1 answer
33 views

Why does useState get shared across routes with different props?

I have an app that has two tabs "Apple" and "Banana". Each tab has a counter that is implemented with useState. const Tab = ({ name, children = [] }) => { const id = uuid(); ...
  • 32.2k
0 votes
0 answers
8 views

navigate and redirect not redirecting to path in react router

I have a logistics tab, where if the logisticData is null, I will redirect the page to /logistic from :logisticId/edit However, when I do this code, it does not redirect the code function EditLogistic(...
0 votes
1 answer
15 views

Why when i change manualy the url on my react page it ignores the .css file?

When i manually change the url http://localhost:3000/overview/all to for example http://localhost:3000/overview/al it shows the page but with 0 css like it ignores the file completely, in my index....
4 votes
1 answer
28 views

SetTimeout Firing Twice

This is the React code that I have for a page: function ExportViewerPage(): JSX.Element { const [hasPrinted, setHasPrinted] = useState(false); if (!hasPrinted) { setHasPrinted(true); ...
0 votes
0 answers
7 views

Using Chakra Drawer and React router?

I have a requirement that certain drawers have their own route. This is relatively straightforward except that means the drawer must transition in/out when the route is active/inactive. The only way I ...
  • 1,094
0 votes
1 answer
23 views

Unable to get word by word response from GPT API

I am trying to get the response from my gpt api, word by word like chatGPT generates and not all at once. I have all other things working, getting the response as expected just not in chunks . I am ...
  • 53
1 vote
3 answers
18 views

Passing number in range as a prop in React with Typescript [duplicate]

I have the following props interface in my component: export interface ComponentProps { title: string; value: number; } However, I need to veryfy that this value is a number in range from 0 to 24....
  • 5,671
0 votes
0 answers
8 views

Can I force React/SASS to compile an image WITHOUT adding cache-busting?

I've inherited a React project and been asked to add style overriding to allow for whitelabeling. One of the requirements is to replace a vendor-specific image with a more generic image that will work ...
  • 639
0 votes
1 answer
13 views

Invalid hook call using Material-UI in a React-TS project

I have following functional component using Material-UI: import React, { useState } from 'react'; import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@material-ui/...
-1 votes
1 answer
19 views

weird AXIOS post request headers setting in react component

I have this react button function in my script I have googled it people said you gotta put the double quote like below "Authorization": `Bearer ${cookies.Token}` I have tried on the content-...
0 votes
0 answers
14 views

How can I add a button to the right side of an antd menu item

I want to create a Sider in React with antd. I fill the sider dynamically with items. Therefore I have the function getItem() to create me an item. Now I want to add a button next to the label of the ...
0 votes
0 answers
7 views

Is react native expo project supports bluetooth printer?

In react native expo project i am trying to implement bluetooth print option , printer connect by bluetooth in the app with select device option and after click print need to print content. i have ...
0 votes
0 answers
10 views

How to recieve answer from remote peer webrtc connection. Using React

So I am new to webrtc and trying to create a livestream and connection using a third party api. The api provides me with iceServers, offer-sdp, session-id and stream-id. First I am wondering how and ...
  • 11
0 votes
0 answers
12 views

Problem with displaying image of the Google map

I obtained coordinates via with expo-location, when obtaining the coordinates, I transfer it to the google api so that it gives me the image of the coordinate, but it doesn't display anything, it ...
0 votes
1 answer
24 views

Disable input field based on the value of a dynamically created form field in react

I am creating a functionality using antd and react.js to implement dynamic form fields like below link: https://codesandbox.io/s/853qm4?file=/demo.tsx Here initially I want the price input field to be ...
0 votes
0 answers
5 views

responsiveFontSizes in theme not working for MUI, react

Would anyone know why responsiveFontSizes just won't work for my theme? or how to go about debugging such a thing? I've spent hours searching and tried everything i've seen (which isn't actually much ...
0 votes
0 answers
29 views

Getting error, use `yyyy` instead of `YYYY` (in `dd-MM-YYYY`) in php although i already format to 'yyyy'

The current output of my date right now is something like this 13/01/2022. The code uses toDateString() to format the date. Below are the full code. <?php namespace App\Http\Resources; use App\...
1 vote
2 answers
35 views

Does a client layout make everything client? If so, how to add client interactivities to it while keeping it a server component?

I'm trying to understand how to handle modals opening/closing with server components. Previously, with client components, I would just lift the state up to my Layout: export default function Layout({ ...
  • 366
0 votes
0 answers
11 views

Update production code without affecting the ui

I already successfully deployed my web app on AWS . Now, whenever I have updates/new features to be deployed, I have to execute git pull then npm run build pm2 restart app. This takes time to build ...
  • 799

1
2 3 4 5
8982