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.
30,093
questions
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 ...
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 ...
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
...
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={...
-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);
...
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 ...
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 ...
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....
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 ...
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 ...
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() {
...
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 ...
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 [...
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 [...
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 ...
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 ...
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()...
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"
...
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 }: ...
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 ...
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 ...
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 ...
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 ...
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 ...
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
...
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, {
...
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 ...
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 ...
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?...
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 ...
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: [
{
...
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,
...
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, { ...
-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 ...
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....
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 ...
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+...
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 ...
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 ...
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 ...
-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 ...
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';...
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 ...
-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";
...
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 ...
-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 ...
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 ...
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 ...
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. ...
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 ...