Category "react-hooks"

useState and if statement causing Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

What I'm attempting to create is a React component which conditionally renders when the value of the prop boxToggle is true, and also returns null when the user

react route component is not rendering anything

I created my app with create-react-app and tried to use react-router on it. but it's not working at all. I am using react-router-dom 5.3.0 version. But if I typ

Cannot position react-perfect-scrollbar with scrollTop using React hooks

I have an array of objects being rendered in a table with a react-perfect-scrollbar instance. The code is the following: const myComponent = ({ myArray }) =>

Unsubscribe from watchPositionAsync with useEffect return function

Using react native with expo-location for a mobile app, I would like to unsubscribe from Location.watchPositionAsync which returns a promise with a remove() met

React Hooks with Redux & MVVM architecture

I am trying to update my React application to use MVVM as an architecture pattern. I initially built it out with Hooks and Redux. I've come to find out that eve

First Character is not displaying in input field useForms

When I click on Submit, it gives an error "required". But when i type text it doesn't take first character. On entering first character it only removes "require

React Hooks with Redux & MVVM architecture

I am trying to update my React application to use MVVM as an architecture pattern. I initially built it out with Hooks and Redux. I've come to find out that eve

Adding a key-value pair to an object inside loop using React useState hook

I'm trying to add a key-value pair to an object using useState inside map function. However, the spread operation in setContainer({...container, [data.pk]: data

React-chartjs-2 update height dynamically

I am using react-chartjs-2 library. I have used HorizantalBar which will receive data through props dynamically from parent component. I have wrapped Horizantal

How to implement Twak.to widget in a Next JS website?

I have tried what is written on their @tawk.to/tawk-messenger-react plugin docs? I have made a component like /components/Chat.js import TawkMessengerReact from

React-typescript: Object is of type 'unknown'. TS2571

I am using React-TypeScript for my project. For state management, I am using React-redux, for function handling I am using redux-saga. For gluing the redux stor

Javascript file upload e.target == null when choosing another file after initially chose one

I've currently implemented the file uploading using <input> and for some reason when I try to change the file after already chosen the file. The website w

React Native InitialRouteName

I'm using React Native v5.0 and trying to set a nested navigation for my app, however, the prop "initialRouteName" don't seem to work, even if i set it alone wi

Displaying a Success Message on form submission with react-hook-form using hooks

I have a form that does the error validation correctly but having trouble trying to show a success message if everything is filled out and submits. I'm using th

TypeError: (0 , _react.useEffect) is not a function

when in the development environment, my app works just fine. When in the production environment it crashes with the error: Uncaught TypeError: (0 , _react.useE

useLazyQuery not being called after onClick

I'm trying to check if my user isLoggedIn with a query from GraphQL API data from the user if it's loggedin if not it's supposed to return undefined or some err

useLocation: Hooks can only be called inside of the body of a function component

I'm trying to use the useLocation hook in my function component but I'm getting Error: Invalid hook call. Hooks can only be called inside of the body of a funct

React.useState is changing initialValues const

I'm experiencing some odd behavior with react's useState hook. I would like to know why this is happening. I can see a few ways to sidestep this behavior, but w

How to create a custom hook that recives dependencies?

I'm making a custom hook that have a toogle when some state change. You should be able to pass any state in an array. import { useState, useEffect } from 'rea

Implementing a countdown timer in React with Hooks

Im trying to render a count down timer on screen with react hooks, but I'm not sure the best way to render it. I know i'm supposed to use the useEffect to comp