Questions tagged [react-hooks]

React Hooks are a feature that allows developers to use state(s) and other React component lifecycle features without writing a class-based component.

Filter by
Sorted by
Tagged with
0 votes
1 answer
28 views

Why the same data is adding in the useState array of object in reactjs?

I am working on an react app where i am fetching data from firebase databse and then saving that data in an useState array of objects now the problem is that every other data field is saving perfectly ...
Vivek Fauzdar's user avatar
0 votes
0 answers
24 views

Why is my setState in useState working the opposite way?

I am implementing a select all checkbox in typescript. This is what it looks like: The checkbox besides "Songs" is the select all checkbox,but when it turns to checked, the other checkboxed ...
susanliu's user avatar
0 votes
2 answers
19 views

React rerendering causing countdown timer to skip a number

I built a countdown timer in React using useEffect and setTimeout from the following code below import React, { useState, useEffect } from 'react' import "./App.css"; // Countdown Timer ...
Larry-Larriee's user avatar
0 votes
1 answer
12 views

React Native TextInput Not Updating When Buttons Are Pressed

I am working on a React Native application to create a calculator. I have a TextInput field where I want to display the input, and I'm trying to use the showSoftInputOnFocus property with editable={...
XMehdi01's user avatar
  • 5,608
-1 votes
0 answers
21 views

Passing form data between components via react

import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; function SharePoll() { const [pollResults, setPollResults] = useState(null); ...
Iyexis's user avatar
  • 23
0 votes
0 answers
24 views

React Next.js useEffect when the first render of the page is not working

I am developing with React. I have different pages. But I want all my filters to be cleared except when going to the 'Football' page. When I go to a page other than the Football page and come back, my ...
zfrylmz's user avatar
0 votes
1 answer
22 views

Need to make a call to one api only once when the page is loaded and once when the same page is unloaded (e.g. user switch to other page)

I want to make a "single" call to one API when particular page is loaded (on Load) and later when user navigate to some other page then I want to make another call (on un load) using react ...
Dhanesh Mane's user avatar
0 votes
0 answers
24 views

How do I prevent this infinite loop triggered by setting state via onChange in a controlled select element?

UPDATE: I noticed that when I made the "iPay" state its own separate state instead of including it in the bill state object that the infinite loop issue went away. I have no idea why that is....
Cassius Reynolds's user avatar
2 votes
1 answer
27 views

React - best practices on sharing functions across components

When following best practices in React, what is the best way to share functions across components? A simple example I have right now is a date formatter that just takes a DateTime and converts it to a ...
Roy's user avatar
  • 31
0 votes
0 answers
13 views

Firebase database 'set' method throwing error on runtime

I'm trying to run the above function on my react native project but am getting "ERROR ReferenceError: Property 'e' doesn't exist, js engine: hermes" On running it what could possible be the ...
Onyela Udochukwuka's user avatar
0 votes
0 answers
45 views

component is rendering when the state value is not changing?

In the below code, the component will be rendered once. Because the state value does not change when I click on the button. import { useState } from 'react'; import './App.css'; function App() { ...
noob_developer's user avatar
0 votes
0 answers
25 views

adding zustand to react app gives a compilation error

This is the zustand part: interface AuthSlice { user: User | null; session: Session | null; loginUser: (email: string, password: string) => Promise<void> } export const authStore ...
nirvair's user avatar
  • 4,011
2 votes
3 answers
73 views

Invalid hook call of useRef()

I'm trying to assing refs dinamically, but I get the error "Invalid hook call. Hooks can only be called inside of the body of a function component" when useRef. Here: const [...
aitor's user avatar
  • 2,331
0 votes
1 answer
30 views

React use hook inside eventListener

I have created the following hook to play audio in react: "use client"; import { useEffect, useState } from "react"; export const useAudio = (url: string) => { const [...
JaRoMaster's user avatar
0 votes
3 answers
53 views

Prevent double click React

Hello everyone im trying to prevent double click but im not doing any API calls, and dont want to use timeout I did few approachs first one import React, { useState } from "react"; const App ...
Neo's user avatar
  • 477
0 votes
2 answers
25 views

why my expo app's fonts don't work on android but on web it works fine

that is my app in github: https://github.com/Ammar0203/expo why my expo-react-native app's fonts don't work on android but on web it works fine it says : (fontFamily "DMRegular" is not a ...
Ammar Abbara's user avatar
0 votes
2 answers
44 views

How to solve issue with useEffect in Next.js

How can I make useEffect have control over the component update? I have this: const [data, setData] = useState([]); useEffect(() => { fetch("/api/data") .then((res) => res.json()...
miguel morillo's user avatar
1 vote
1 answer
26 views

Initial value of state in useReducer not working properly

I have problem when I initiate state in useReducer using localStorage AuthContext.jsx import { createContext, useReducer, useEffect } from "react" import jwt from "jwt-decode" ...
Tko Code's user avatar
0 votes
0 answers
33 views

React infinite re-render: Maximum update depth exceeded

so i have a React component that renders a table with some data and the table has some filter components in order to update the data. here is the component: const DoctorTable = ({ onChange, value }: ...
Mona's user avatar
  • 47
0 votes
1 answer
17 views

Having issues parsing json data to a type array in React NextJS

I am having the following issue. I want to make a fetch that gets json data. use a parser to parse that data to an array of a certain type that is given to the parser as an argument. Im very new to ...
Andreas Damen's user avatar
0 votes
2 answers
30 views

AsyncStorage to store themeColor in React native

I am new in this topic (data store in asyncStorage) I want to store my theme color in asyncStorage because when user close the app them will remain same as they selected. I am able to change the theme ...
Dev Soni's user avatar
0 votes
0 answers
24 views

How to switch between components in a list and also be able to replace any component in the list in react js? State does not update in current design

I am trying to create a quiz app with 3 buttons, Next, Back, and Switch Question. Each question is a unique component of its own, so I cannot pass the question details in a prop. This is my current ...
Deepjyoti Deb's user avatar
0 votes
1 answer
35 views

TypeScript throws error when trying to index an object that I have casted to DefaultValues<T> in React-Hook-Form

I've created a custom hook that allows you to define a configuration object for forms using React Hook Form. Now, I'm attempting to include default values from the configuration object into the ...
TZR's user avatar
  • 5
0 votes
0 answers
34 views

How to get the conditionally calculated value in useEffect to reflect before rendering?

I am trying to make a simple game. To get started with, I am trying to make a html element move within bounds of its parent . With my solution the html element is moving correctly but at the end it ...
Ramu's user avatar
  • 147
0 votes
1 answer
59 views

useState, useEffect and fetch not working together [duplicate]

I made a page that calls an API and shows the data on UI. Here are the parts of the code: const HomeGo = ({route}) => { const token = route.params.token const message = route.params.message ...
Asif's user avatar
  • 1,292
0 votes
1 answer
21 views

Unexpected return - {"_A": null, "_x": 0, "_y": 0, "_z": null} - Stripe Request

I am passing this function for the request: useEffect(() => { const fetchPaymentSheetParams = async () => { try { const response = await axios.post(${API_BASE_URL}/payment-sheet, { ...
Henrique Nascimento's user avatar
0 votes
0 answers
6 views

Create drag and drop ,also re order divs with interact js using useref in react

i have a div of icons which are placed side by side using mapping array , i need to drag and drop each icon so that other icons re order itself was expecting to use refs for position and ...
Bharath Bellamkonda C's user avatar
0 votes
1 answer
22 views

using firstUpdate.current but don't understand how it is updating react component

I am working on a timer but I wanted to make sure the timer shows up right away if you do a hard refresh on the page. I tried experimenting and ended up placing these in my code. And the issue is, it ...
Xero1's user avatar
  • 1
0 votes
0 answers
21 views

What is the preferred way to mutate in swr?

const getKey = (pageNumber: number, previousPageData: FileFetchRes) => { if (previousPageData && !previousPageData.pageInfo.nextPage) { return null; } return `/file?...
madol's user avatar
  • 575
0 votes
1 answer
22 views

Trying to apply navigation through highlighted results after search similar to Ctrl + F

I have a chat similar to WhatsApp Web and I'm applying a search similar to the Ctrl + F. I have an input that take the searchQuery and pass it to a component I call TextFormatter. I'm trying to count ...
JhonesJGL's user avatar
0 votes
1 answer
33 views

how to change value of all match property in nested objects in using state array reactjs / react native

This is my json response const [shopRecord, setShopRecord] = useState({ shopSetting: { shop_name: '', shop_address: '', shop_tel: '', shop_email: '', }, menuCourse: [ { ...
Atif Gulzar's user avatar
0 votes
0 answers
24 views

Share event function into other component

I'm working on a react project 'til I can't pursue because of share event function into other componant. I share you 3 react code : AppBarPhone.jsx : contains the first function handleAddPaymentClick, ...
ikiou's user avatar
  • 1
0 votes
0 answers
19 views

Why does my Files Object doesn't get rendered in React?

i'm relative new to React, and don't get the point why my files Object doesn't get displayed. In the collection_files there is an array with References to each file Document import React, { ...
Gian-Luca Klöckner's user avatar
-1 votes
0 answers
49 views

Why changing array is not triggering a re-render using `useSate` in React Native?

I am creating a list of conversations where I display data using a Flatlist. At some point the data needs to be changed when a new message arrives, and I am doing this by creating a new array and ...
Besart's user avatar
  • 317
0 votes
1 answer
32 views

state not updating inside useEffect

const [bolidata, setbolidata] = useState(''); useEffect(() => { if (location?.state) { setbolidata(location?.state?.data); console.log('This is' ,bolidata ) console....
Mayank Painkra's user avatar
0 votes
0 answers
17 views

Changing the position of alert after user scrolls down the navbar

In my React app, I have an alert that is positioned just below the navbar. When the user scrolls down the navbar I want to change the position of the alert to top = 0 keeping it fixed, so that the ...
THE LEARNER's user avatar
4 votes
1 answer
55 views

useEffect not re-rendering

const [count, setCount]=useState(0); useEffect(()=>{ console.log("count inside hook is ", count); },[count]); if(count<10) setCount(count+1); // setCount(count=>count+...
cheems's user avatar
  • 206
0 votes
1 answer
17 views

React Material UI Dialog form data state not set correctly when updated

When selecting new data for the dialog form it will incorrectly display the original data. Only after closing the dialog and then reopening the same one, attempted before, does the form display the ...
Jack Hickson's user avatar
2 votes
1 answer
26 views

Prevent drop-down from closing in child React component when parent is refreshed

I've done some research on this and the general consensus appears to be to utilize the useMemo and memo React components but I've not had any luck. I have a parent React component (TypeScript) that ...
Mike Lowery's user avatar
  • 2,649
0 votes
0 answers
19 views

React Native setinterval Memory Leak

I have a memory leak for a simple timer using a setInterval (I have similar functions with the same problem and I am using this to debug) with this set up in React Native. I do not know how to stop ...
mlav's user avatar
  • 1
-1 votes
1 answer
32 views

React Functional Component and scope

I have an issue with a React Functional Component which is a video player. I need to call a function called onEnded from the video players ended event. The function is a callback that is being passed ...
Lee Probert's user avatar
  • 10.3k
0 votes
0 answers
33 views

Why useEffect runs multiple times in Next.js

I'm developing a Time Tracking component in Next.js application. Here's my TimeTracking (./app/components/TimeTracking.tsx) component: 'use client'; import React, { useEffect, useState } from 'react';...
in43sh's user avatar
  • 737
1 vote
2 answers
48 views

React delete answer handler

I'm trying to delete an answer next to the delete button I'm pressing. I'm generating a list of answers and next to each answer there is a corresponding delete button. However, when I press the Delete ...
Iyexis's user avatar
  • 23
-2 votes
0 answers
22 views

Cannot read properties of null (reading 'useRef') TypeError: Cannot read properties of null (reading 'useRef') at BrowserRouter [closed]

Eu já instalei corretamente o react-router-dom umas duas vezes e continua dando esse erro import React from "react"; import { Route, BrowserRouter } from "react-router-dom"; ...
Yasmin Couto's user avatar
0 votes
0 answers
11 views

how to handle a carousel using 'useState' hook in nextJs 13

I'm struggling to update some of the functions from a old version of nextjs to the new one (13). Specially those containing the usestate hook. For some, i used the 'use client' as suggested by the ...
Will Singleb's user avatar
-1 votes
0 answers
32 views

How can I get dynamic references to work?

I'm constructing a Navbar using PrimeReact and need a dynamic reference for each submenu item. I've followed the example of another StackOverflow answer in how to create dynamic references. Here is my ...
ianyoung's user avatar
  • 2,861
0 votes
0 answers
33 views

Using the value of state before updating state

Do I need to ignore a missing dependency warning here or is this structured incorrectly? This component updates a list of products for the supplied personId. The initial product load is via the ...
PaulB's user avatar
  • 105
0 votes
0 answers
69 views

I am getting a lot of error while trying to build a new react app

I am new to React, and while trying to create an app on VS Code but I am unable to do so and I getting the following error:- Can somebody please tell me what I am doing wrong, I have already ...
Sagnik Majumder's user avatar
0 votes
0 answers
16 views

Setting State with Set Interval in React Native

I have a async function that outputs an array. I have a useeffect that has this function (get array) defined inside of it. Then I call a timer inside the useeffect to continuously run the function. ...
mlav's user avatar
  • 1
0 votes
0 answers
6 views

In the react big calender, in week view, i want to display week days with dates, in place of time slots with hourly gap, and on top only resources

In the react-big-calender, in the week view, it is showing on top bar with resources and under it, week days, and on left side hourly time slots with 1 hour gap. I want to have a functionality such ...
Ambience Head's user avatar

1
2 3 4 5
602