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.
442,554
questions
0
votes
1
answer
34
views
React: How to reload data from parent component and render when child component do update?
I've 1 Parent component, 1 child component, and 1 child's child component.
Im using Jotai state management.
Parent Component:
Have a button to view LogDetails.js (Dialog)
const viewLog = ...
28
votes
6
answers
75k
views
componentWillReceiveProps has been renamed
I'm using Material ui SwipeableViews That use ReactSwipableView package, I'm getting this error on the console
react-dom.development.js:12466 Warning: componentWillReceiveProps has been renamed, ...
0
votes
3
answers
2k
views
React Select Typescript event type
I have this handleSelect:
const handlerSelectBank = (event: React.ChangeEvent<{ value: unknown }>) => {
setState({
...state,
buttonDisabled: false,
selectedBank: event
});
};
...
0
votes
0
answers
9
views
TypeError: Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method
I am trying to trigger a rtk query end point from a function
const[getcitycode,{isLoading,error,data,isSuccess,isError}]=useLocationQuery();
const getLocationDetails = async () => {
const ...
0
votes
0
answers
5
views
Sending data from a component to a slice and receiving one parameter as undefined even though in the component it is being sent just fine
I am new to redux toolkit. I have a login component from where I am sending an email and password to user slice. From there I am making a post request via axios. The problem is I am receiving the ...
-1
votes
0
answers
11
views
How to use 'useCallback' in a mapped onClick event?
I'm running into the JSX props should not use arrow functions eslint error and have read their rule on it. However, I'm uncertain how I would properly implement that in my situation. Here's my button:
...
256
votes
12
answers
471k
views
Typescript: React event types
What is the correct type for React events?
Initially I just used any for the sake of simplicity. Now, I am trying to clean things up and avoid use of any completely.
So in a simple form like this:
...
4
votes
3
answers
1k
views
how to prevent react-datepicker from pushing inline elements to new line on toggle?
When using react-datepicker with 2 adjacent elements, the second element gets pushed to the next row during the first element's click event.
Before:
After:
MRE:
import DatePicker from 'react-...
0
votes
0
answers
11
views
Unable to Map Array of MongoDB Documents Returned from Backend into React Components
I am trying to get my front-end to call to the back-end for all the "blog posts" that are stored in my MongoDB database. At the moment there is only one document for testing.
On the backend ...
0
votes
1
answer
5
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
17
views
React useState is setting wrong value
In parent js, I modify some params and it filters my posts array. Then for each post, I use post.js file. As you can see, useState isn't setting proper value, but If I use constant value instead of ...
0
votes
1
answer
10
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 {...
-1
votes
1
answer
31
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
vote
2
answers
472
views
React Router Dom routes are returning blank pages
My route set up returns a blank page with no error, the only thing that's showing up is the side menu. I don't know what I'm doing wrong?
App.js:
import React from "react";
import Sidebar ...
1
vote
0
answers
147
views
Why does the background color only change after a page refresh?
When a user logs in, the background of their liked photos should change. Why does the background color only change when the page is reloaded and not after a successful login? There are too many ...
0
votes
1
answer
16
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
2
answers
26
views
Connecting body background image to a state in next.js
I am trying to make a pomodoro timer using Next.js And I need to connect body's background image to a state. But my code doesn't work.
I used this code to update body style:
import { VscDebugRestart } ...
0
votes
1
answer
56
views
How to Export a Variable to Another file?
const ForgotPassword = ({ ...others }) => {
const theme = useTheme();
const { token } = useParams()
const handleSubmit = async(values) => {
console.log('load')
try {
const ...
0
votes
0
answers
25
views
React-native project doesn't run
I have little experience in react-native.
I received a project that was developed in an old version, I'm trying to run the project but I'm facing an error that I can't solve.
Can you guide me please?
...
0
votes
1
answer
216
views
React onChange event takes 2 arguments, but even after I write them, an error is thrown
I've got a problem with my React / typescript code. I have a custom Input, which has its own described property 'onChange'
onChange?: (value?: string, event?: React.ChangeEvent<any>) => void;
...
1
vote
1
answer
18
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....
0
votes
2
answers
59
views
I can't return the function I created [duplicate]
I'm having a problem, where I need to return some parameters that I called in a foreach that I created, but when I call this function it doesn't return anything
import React, { useState, useEffect } ...
0
votes
2
answers
71
views
Issues with an Array.forEach [duplicate]
Hope someone here would be able to help me out.
I am trying to build an Owl-Carousel from an array of objects.
but for some reason the array is not been recognized, would appreciate if someone could ...
0
votes
1
answer
76
views
Compiling Error while using .map function in the TableBody of Material-UI using ReactJS [duplicate]
i am kind of stuck when working on an array of objects, so basically i am looking to make dynamic table using MaterialUI in React, but i am experience an error at <TableRow key={producNumber}> ...
0
votes
2
answers
55
views
Build dropdown menu with array passed from parent component [duplicate]
I am trying to build a dropdown-menu and add data from my array to the dropdown-item. My current code isn't returning anything into my const Users. How can I use the array to add data into the ...
0
votes
1
answer
14
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 ...
0
votes
2
answers
120
views
Not sure how to map and display data in react app [duplicate]
I have data showing up as following in my backend server
I want to show this data in my frontend react app.
I have tried the following so far-
import {useState, useEffect} from 'react';
import logo ...
-1
votes
0
answers
19
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
vote
1
answer
18
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 ...
1
vote
2
answers
491
views
How to show the image links in an array of an object with map function in React? [duplicate]
I'm new to React and frontend development. My objective is to let <img src={child.s3_url} className={classes.magetty} /> to work successfully in the map(), and I hope there are many pictures on ...
-1
votes
0
answers
8
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 ...
1
vote
2
answers
69
views
Expected an assignment or function call error in ReactJS [duplicate]
This is actually a component that I'm trying to implement in ReactJS
Here is the code snippet:
const Leaders=({leaders, isLoading, errMess})=>{
if (isLoading) {
return (
<...
1
vote
2
answers
4k
views
Loop through the array and return a `Dropdown.Item` element for each item [duplicate]
I am trying to loop through the todos array using the JavaScript map() function. I want to return a Dropdown.Item element for each item.
When I click the Dropdown.Toggle , an empty list expands. ...
0
votes
0
answers
15
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'...
65
votes
3
answers
84k
views
Typescript types for React checkbox events and handlers?
I'm building something like this React example in Typescript. The goal is to have a parent that has a state, and it creates several stateless child components that pass their clicks back to the parent....
0
votes
0
answers
21
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 ...
5
votes
4
answers
6k
views
React(Typescript) onchange event type
In My React Component I have Radio input
<input type="radio" onChange={changeData}>
and
function changeData(e: any) {}
How can I specify event type I don't want to use any.
1
vote
0
answers
25
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 ...
8
votes
2
answers
5k
views
typescript react setState with user input
In this basic example of typescript react (create-react-app) I am trying to change the state.name by a user input.
Could someone show me a working example (which I didn't found) or better: where the ...
1
vote
1
answer
18
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
147
views
OpenAI saying "You didn't provide an API key", yet I have
I am fairly new to API's and I'm trying to create a small web-app utilizing the Davinci text model.
I feel like I've done every step right when setting up the API, but I get an error that says:
{
&...
1
vote
4
answers
12k
views
React Typescript input onChange event type?
I'm trying to get text from a input element, setting it to state and then rendering it back into the input box. However I think my event typing is wrong? I've searched online and tried implementing ...
0
votes
3
answers
3k
views
How can I add a stylesheet dynamically with NextJS?
In my nextJS application, I need to load a stylesheet dynamically based on the user preference received from the database.
So, in my page, I'm adding it in the Head (next/head), as follows:
<Head&...
0
votes
1
answer
29
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
1
answer
19
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 ...
-1
votes
0
answers
21
views
React Conditional Rendering with === and || Statement [duplicate]
{e.orderStatus === "Success" ? (
<>You have paid </>
) : (
<>
...
2
votes
2
answers
3k
views
onInput event type on TypeScript / React
I am trying to use onInput on a generic Input component I've created, everytime I add a DOM event I have a little fight with TypeScript.
This is my component, Input.tsx:
import React, { ChangeEvent, ...
0
votes
1
answer
23
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 ...
2
votes
1
answer
51
views
React application shows the homepage briefly, then redirects to the login page if the user is not authenticated [duplicate]
I am using React.js and react-router-dom version 6. I have set up a private Outlet and made redirecting functionality works.
The problem is if the user is not authenticated and tries to go to the ...
1
vote
3
answers
1k
views
How to implement responsive width for Drawer MUI v5 component?
I am using Material UI v5, and am trying to make a responsive drawer where for smaller devices it will take up 100% of screen width while for larger devices it should only take 1/3 of screen width. ...