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.
440,768
questions
-1
votes
0
answers
12
views
React document.addEventlistener keypress or keydown [duplicate]
"Why does the keypress or keydown event in React using addEventListener get triggered twice in Visual Studio Code?
I'm using addEventListener to listen for keypress or keydown events in React, ...
-1
votes
0
answers
5
views
Not able to get the rest of the data using axios
This is the Home Component
enter image description here
This is the Row component
enter image description here
The Movie Component
enter image description here
This is the request file which consists ...
0
votes
0
answers
10
views
sending data out of the boxing HARD
ran into a big problem. I do not know who to contact, I need to redirect anywhere. The main thing is to leave the page. There are 20+js scripts in the page load (don't ask, I don't know myself). I don'...
0
votes
0
answers
13
views
Setting props is duplicating components on screen (React)
Working on a shopping cart project that has two main pages: The video game page that shows a bunch of video games (stored as objects inside an array and mapped to the screen) and a shopping cart page ...
0
votes
1
answer
12
views
Is it possible to await api.dispatch in rtk query?
I use typescript, react and redux toolkit along with rtk query. I use jwt tokens for authorization. They are stored in localstorage and redux toolkit state. Before each request, I check whether the ...
-1
votes
0
answers
17
views
React Conditional Rendering with === and || Statement [duplicate]
{e.orderStatus === "Success" ? (
<>You have paid </>
) : (
<>
...
0
votes
0
answers
10
views
Copy Files from Src to build folder using Webpack
I am using copy-webpack-plugin to copy one folder from src to the build folder.
My application can build successfully but the folders are not carried over.
Folder to copy: src/assets/components
...
0
votes
1
answer
17
views
React main page is not loading
I'm trying to develop an online shop in React. Trying to load app.js. I don't get any errors, just a blank page.
App.js as follows:
import AppRouter from "./components/AppRouter";
import ...
0
votes
1
answer
22
views
TypeError: undefined is not an object (evaluating 'expenses.reduce')
I am developing an expense tracking application where i am using a reduce() fuction to calculate the sum of all the expenses. But i am getting TypeError: undefined is not an object (evaluating '...
0
votes
0
answers
6
views
how to set default values for RFH from rtk query data
i am using rtk query and react-form-hook together for a project
i want to set the resonponse data of rtk query (hook) as the default values for form
// ....
const {data} = useGetPostQuery()
const {...
0
votes
0
answers
2
views
React native chip selection not updating in View
`
export default function ChipsTest({ }) {
const interests = [{ name: 'ABC', selected: false, id:1, }, { name: 'XYZ', selected: false, id:2 }, { name: 'Bla bla', selected: false, id: 3 } ];
return ( ...
0
votes
1
answer
18
views
How to run a task in background of the app without leting user that is running?
How to run a task in the background of the app without letting the user that is running? if a user navigates to a different screen then also that task works until it's done how can I do this in rn ...
0
votes
0
answers
4
views
Firebase modules failing to load in firefox only
I think the title says it all, I'm currently making an app and it works fine in every browser except Firefox, what could the problem be ?
0
votes
1
answer
20
views
Backdrop-filter not working for extended navbar
I'm trying to give blur and glass effect for Navbar, it's working for top section navbar but for mobile navbar when clicked on menu icon drop-down the blur effect is not working
enter image ...
1
vote
0
answers
22
views
Gatsby Build Error: WebpackError: TypeError: apiFn is not a function
I've got both dynamic and static markdown pages on this site, and this error is surprisingly thrown for a blog post page (just markdown):
failed Building static HTML for pages - 3.005s
ERROR #95313 ...
0
votes
1
answer
37
views
How to dynamically render react component?
This is a text that I receive from API of a headless CMS:
<h1>Some header here</h1>
<ul>
<li>Some table of content here</li>
</ul>
<p>Some content here</...
-1
votes
0
answers
25
views
How to make component appear/disappear animation in React?
There is a block of content:
<div className="col-7">
{content}
</div>
A component is placed in "content" depending on the state:
switch (activeItem) {
case &...
-1
votes
0
answers
18
views
push item from map function into an array
Iam trying to get the data from Api (azureMsal). I used one of the library to create image slide show (simpleImageSlider)
the libarary take the images from array that defined as Images
const images = [...
1
vote
1
answer
17
views
Laravel + InertiaJS + ReactJS Components Renders Twice
So I am currently developing a web application and noticed that some of my components renders twice and I am not really sure why and also that console.log appears twice in the console. I am sure that ...
1
vote
1
answer
17
views
how to call an API from server side in NextJs app on button click
I am using NextJS application and want to call an API on button click, but this should be done through server. I am not able to find any solid results on internet which clearly demonstrate this ...
0
votes
1
answer
20
views
Why do Tailwind classes not work and how can I fix the issue?
I wrote tailwind classes and it doesn't work I have installed tailwind and done the settings
the code
the result
what should I do to make sure classes will work
0
votes
0
answers
13
views
How to impletement React MUI intermediate checkbox for dynamic checkboxes
I want to use MUI intermediate checkbox for cart selection in my project, the checkboxes are dynamic so i can manually add onchange event individuall but from the documention from MUI page I can't ...
2
votes
1
answer
23
views
'Firebase' is not defined
I am using Reactjs and firebase to create a Login Page in my application. I got an error that the 'firebase' is not defined in the part of onClick.
Here is my Log In Page code:
import React from '...
0
votes
1
answer
17
views
other language digit conversion to english issue in React
i have a simple react application containing a input field i want when the user types string it should not accept and convert arabic digits to english also accept upto 2 decimal digits .curently its ...
0
votes
0
answers
15
views
How to setup external identity provider for MSAL js react spa?
I am trying to authenticate using msal js for my react application (Azure AD B2C). Microsoft authentication works perfectly. But I need to add more external identity providers such as Google to my ...
1
vote
0
answers
21
views
Error while deploying firebase app regarding uncaught syntax error
I get this error while deploying my NextJS app on firebase:
Uncaught SyntaxError: expected expression, got '<'
for almost all my js files but I also get this warning
The script from “https://eco-...
0
votes
1
answer
21
views
I am trying to install firebase in my react app and getting this error
it is showing this as i am putting npm install firebase or npm i firebase in windows
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-currency-...
2
votes
1
answer
34
views
React JS: Why is my cleanup function triggering on render?
So I was following this Firebase in React Course, it was going great until I ran into an error even though I'm following the instructor.
I have this useSign() hook:
which I use in this SignIn.jsx ...
-1
votes
2
answers
18
views
React How to Individually Target li State
I am somewhat new to react and I am building a navigation menu where I target the ul and li components using the map() function with index to avoid duplicating code. Whenever I click to open one ...
1
vote
1
answer
13
views
How to prevent Next.js from instantiating the same object multiple time, one per import?
I have an analytics utility like this:
class Analytics {
data: Record<string, IData>;
constructor() {
this.data = {};
}
setPaths(identifier: string) {
if (!this....
1
vote
1
answer
23
views
Am i using Flexbox and breakpoints in a wrong way?
Im practicing flexbox and breakpopint in material UI with reactjs and i trying to do something like this:
But i cant set "pack" word in the first image as the example and the price at the ...
-1
votes
0
answers
23
views
React map only displays the last row
I am trying to read JSON and create output page based on JSON Inputs. It is only displaying the last row. I am attaching the program and the JSON File
It should display all the rows in the order ...
0
votes
1
answer
12
views
DndKit transition delay on drop, useSortable
When I drop an element to resort, there's a slight transition issue where the items goes back to its' original position & then transitions. Below I added a link to video & code.
Really, I don'...
-1
votes
1
answer
22
views
TypeError: X is not a function when using custom hooks
I am using a custom hook that makes a simple fetch call to an api.
Whenever I try and invoke the function with an onClick handler, I get the following error:
TypeError: customHook is not a function
I ...
0
votes
0
answers
13
views
i was not able to install wagmi and did everything to solve it
Error while installing wagmi , did everything clearing cache,restart and package-json
The error:
** npm ERR! code ENOENT
npm ERR! syscall spawn git
npm ERR! path git
npm ERR! errno -4058
npm ERR! ...
0
votes
0
answers
12
views
I am having trouble posting my app on Heroku
I am using this video to push my messaging app on Heroku: https://www.youtube.com/watch?v=MJzbJQLGehs
The server I am trying to push is in this repository: https://github.com/devonasmus/server/tree/...
1
vote
0
answers
39
views
How to go about conditionally rendering a button per link click
My project requires me to build the following:
A dynamically generated table based on search entries found
Each entry is clickable and parses its individual data through a function
The function ...
0
votes
0
answers
22
views
How to debug unconverted source code correctly in react18 jest unit test?
Environment:react18 source code, win10 , node v16.13.1
I'm using jest tests inside the source code to explore the react18 source code,but jest use babel to convert source code, when i debug jest unit ...
-1
votes
0
answers
4
views
Redux remove if quantity equals 0 otherwise decrement not working [duplicate]
I'm trying to decrement my state if an object's quantity is greater than zero and remove it from state if it's quantity gets to zero.
Not sure why the following code isn't working:
decreaseQuantity: (...
1
vote
2
answers
46
views
problem to get an element from an array on React js , javascript API
i'm learning javascript and React JS but i got a problem when i want to fetch some information on the Pokemon API ^^ I can fetch some information but i want to get the second types of Pokemon, as you ...
-1
votes
0
answers
8
views
REACT - export default: Assign instance to a variable before exporting as module defaulteslint(import/no-anonymous-default-export) [duplicate]
Im studying springboot+react, when creating this service, this problem as titled comes out, here is the code:
enter image description here
Problem: Assign instance to a variable before exporting as ...
1
vote
0
answers
17
views
How to re-trigger loading UI in Next 13 using the new app directory?
I am working with Next 13's app directory to build a simple website. The route to my main page is /{username}?year={year}&month={month}. When navigating to the page, the main section of this page ...
0
votes
1
answer
17
views
React slick fade effect porblem
my React website from right to left
<html lang="ar" dir="rtl">
and I have react-slide to show 1 image every slide
const settings = {
dots: true,
infinite: true,
...
0
votes
2
answers
20
views
How to reference an object name in React with the key?
So I'm coding a budget app right now, and I'm using a drop-down menu in a certain part of the app.
<Dropdown>
<Dropdown.Button color="secondary">{selectedValue}</Dropdown....
0
votes
2
answers
24
views
React JS detect active component and update navbar
I am new to React, so apologies if this is obvious.
I have several components on a single-page website. This is my App.js:
function App() {
return (
<>
<Header />
<Nav ...
0
votes
1
answer
16
views
vite Internal server error: Unable to parse HTML; parse5 error code missing-whitespace-between-attributes
I created a vite using tailwindcss project and ran
npm run dev
This is the error message from my terminal
enter image description here
this is the index.html
<!DOCTYPE html>
<html >
<...
0
votes
0
answers
15
views
Codeigniter 4 restful api return cors error when using PUT and DELETE method
On the frontend I'm using react and sending the request via axios.
import axios from "axios";
import { getToken } from "./auth";
const api = axios.create({
baseURL: import.meta....
1
vote
2
answers
41
views
how can i get the user_id from jwt in the localstorage and use it in react?
I am writing a logic to create a post and i want to add the logged in user as the user making the post, i have saved the refresh token in my browser localstorage, when i copy the refresh token and ...
0
votes
0
answers
16
views
Not found page when refresh the page in Vite project deployed
I can navigate to all my pages after deploy my project on Vite using React, but when I refresh the page on certain path or write the path directly on the browser I got 404 page not found.
Here's my ...
-1
votes
0
answers
8
views
How to update or add value in object by string key with points [duplicate]
how to update value by points field name
example: let key = 'header.footer.button.title'
function update_settings(key,value){
array[key] = value
}
let array = {
test: {
test1: 'aaa',
...