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.
449,051
questions
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 ...
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'...
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....
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 ...
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 ...
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, ...
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
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 ...
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 ...
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 ...
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 ...
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 @...
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 ...
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();
...
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 ...
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 ...
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....
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 ...
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 ...
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({ ...
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 ...