Questions tagged [react-hooks]
React Hooks provide developers with the ability to utilize states and various lifecycle features of React components without resorting to writing class-based components.
Looking to personalize the TextField component in React Material UI, particularly focusing on the following CSS class? root: { '& .MuiOutlinedInput-inputMarginDense': { paddingBottom: 'none !important', }, }, <TextField classN ...
One of the components I've created in Next.js is a custom routing link that appends the locale before the pathname when clicked and applies a custom style for the active link. Below is the code snippet for this component: "use client"; imp ...
Struggling to find a way to direct the user back to the Home component after logging out. The API functionality has been tested and is working properly. I'm unsure how to properly implement the logout method in the current context to allow for successful ...
Just a simple application. It displays an unordered list of list items. Could someone please review my usage of the useState() hook? I had to use Array.from() before using the map function on taskList, otherwise I was encountering an error stating that tas ...
I am working on creating a simple list using all the Documents and their contents in a Collection using Firestore. I have managed to retrieve the data, but now my challenge lies in displaying it properly in the UI. However, I am facing an issue where the d ...
Encountering the following error message: TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) This issue occurred during the page generation process. Any console logs will be shown in the terminal window. https://i.stack.i ...
Currently, I am working on a practice fullstack ecommerce application using Postgres, Express, and React as part of my fullstack course. My inquiry pertains specifically to React. Upon logging into the application, I can successfully manage a cart in the ...
The structure of the nested state object is as follows: key1: { key2: [ { field1: "value", field2: ["value", "value"], field3: [ { ff1: "val", ...
I'm having an issue with the onClick event using React hooks. My goal is to have the text change to a different one when the user clicks, and then revert back to the original text on another click. For example, clicking "Change First" should switch it to " ...
When I attempt to add objects to a hook within a component, it seems to be functioning correctly. However, there is an issue where the last selected object is consistently missing from the updated hook array. This behavior also occurs when removing an obje ...
Here is the code I'm trying to convert: document.addEventListener("scroll", function() { const links = document.querySelectorAll(".nav-link"); for (const l of links) l.classList.toggle('scrolling', window.scrollY &g ...
I am currently in the process of transitioning from using class components to React hooks with the Context API. However, I am encountering an error and struggling to pinpoint the exact reason for it. Here are my Codes: // contexts/sample.jsx import React ...
Hello, I am currently working on a personal project and encountering a delay due to the following error message: react-refresh-runtime.development.js:315 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component ...
In line 5 of the script, TypeScript raises an issue regarding the possibility of gameInstanceContext.gameInstance being null. Interestingly, this concern is not present in line 3. Given that I have verified its existence on line 1, it is perplexing as to w ...
When I utilize the post-increment operator to change the state variable, the count variable retains its old value... Allow me to illustrate this with an example app: When I click the button with the following code, the app displays the following sequenc ...
I recently developed a Next.js application where I implemented user authentication using React context and reducer. Here's the code for my context: import React from "react"; import { createContext, useContext, useReducer } from "react& ...
Here is the snippet of code I'm working with: useEffect(() => { //references const storageRef = projectStorage.ref(file.name); storageRef.put(file).on('state-changed', (snap) => { let percentage = (snap.bytesTrans ...
My goal is to update a state whenever a user changes input fields on my dashboard. Here's how the handler should operate: If the state is empty, create a user with standard values and change them to the new inputs If the user already exists in t ...
import { useState } from 'react'; import About from './Container/About'; import Profile from './Container/Profile'; import {BrowserRouter as Router,Route} from 'react-router-dom' function App() { const [state, set ...
I set up the Gatsby starter application here and everything was running smoothly until I introduced a hook (specifically by swapping out the index.js with the code below): import React, { useState } from 'react'; export default () => { const [greeti ...
I am facing an issue with my React application where the UI updates correctly when removing items from a list using the state hook, but the underlying array of elements still shows all elements. To see this problem in action, you can check out this CodeSan ...
Currently working with React 16.8.3 and hooks, I am trying to implement React.useState type Mode = 'confirm' | 'deny' type Option = Number | null const [mode, setMode] = React.useState('confirm') const [option, setOption] ...
I am currently working on a React App that involves CRUD operations connected to a Rails API. The project structure is as follows: App.js -> UserIndex --> Form --> User -> User My goal is to pass a function from <App /> to its gr ...
I am facing a simple issue where I need to display the full date words, such as "Nov 22th 2020". Currently, I am only able to display the Month and Date. Could you please review my code on CodeSandbox? CLICK HERE <MuiPickersUtilsProvider utils={DateFn ...
Exploring DexieJS and Material UI for the first time has been quite a learning experience, so I may have overlooked a crucial aspect. Here is a glimpse of my code: Subscreen.tsx const [fightersArray, setFightersArray] = useState<FighterEntity[]>([]) ...
Whenever I use the code below, a message saying Rendered fewer hooks than expected. This may be caused by an accidental early return statement. pops up: {headRows // Filter table columns based on user selected input .filter(item => displayedCol ...
I created a function in the child component to handle checkbox selection and trigger setDispatch(true). Unfortunately, whenever I check the checkbox, the website freezes and stops responding until I close and reopen it. Here is the function: const [ ...
Let's address the issue at hand: I spent several months working with a custom React Hook using plain JavaScript, and here is the code: import { useState } from 'react'; const useForm = (initialValues) => { const [state, setState] = useState(initia ...
When attempting to utilize the new useSelector hook (shown in the example below) from react-redux in TypeScript, an error is encountered indicating that the function does not exist: Module '"../../../node_modules/@types/react-redux"' has no exported membe ...
I have a list for uploads, and whenever I upload new data, the old data in the list gets removed. However, I want to display all the data together. How can I resolve this issue? const [fileList, setFileList] = useState<AddedFile[]>([]); const beg ...
useEffect(() => { if(dataReviews) { dataReviews.forEach( item => { if(item) { item.text.forEach((comment,index) => { ...
Currently, I'm using Next.js and React to develop an application where I am facing a challenge with opening a model using a function while passing data from the current state. I have been able to fetch updated data from my Supabase database successful ...
Objective: Retrieve data and showcase it in a dialog box using the button located in the Button column. Essentially, clicking on one of the buttons will display the corresponding data in the dialog. Challenge: Currently, I can only extract hardcoded s ...
Whenever I click on the sidebar, my menu should appear, but instead I'm encountering an error message saying "react-dom.development.js:86 Warning: React does not recognize the handleClick prop on a DOM." import { useState } from "react"; imp ...
As a newcomer to React, I have a question about refreshing the score in my card game within a forEach loop using setTimeout. While the state appears to update correctly, the DOM (Component overarching) does not reflect these changes. export function Refill ...
When working with a react hook and needing to define a function inside it, which approach is preferable? useEffect(() => { //... function handler() {} //... }, []); or should I use the newer const declaration instead? useEffect(() => { ...
When attempting to update the value using useState, I am encountering an issue where the value is not updating as expected. Below is the code snippet causing the problem: The functionality should show details when clicking on the item `div`, and hide tho ...
I have a particular component that I am working with: const Component = () => { useEffect(() => { console.log('Executing useEffect in the Component') }, []) return <Text>element</Text>; } Whenever I conditionally re ...
***I'm looking to define the initial state as an array with two objects, each containing another array. However, I'm having trouble setting this state using setState. The state I am trying to set should consist of two objects, each with two prop ...
I am trying to rewrite the life cycle methods in hooks but I am facing some issues. It seems like the component is not behaving as expected. How can I correct this? Can you provide guidance on how to properly rewrite it? useEffect(() => { updateUs ...
I need to implement a functionality where the startClick function is triggered on BackButton click before executing the dispatch (giveForm2PreviousStep(props.currentStep, props.goToStep)) method. How can this be achieved? Inquiry JS const Inquiry = props ...
Currently, I am attempting to display the avatar image with a curved effect outside the border line of the sidebar. I have referenced the persistent drawer from MUI v5 for inspiration. You can view an example here: the codesandbox link The desired outcom ...
I am encountering a similar issue as described in this Stack Overflow post, however, the solutions provided did not resolve my problem. The situation involves disabled textfields. When the edit profile button is clicked, the disabled state for the account ...
After implementing the given component, I encountered an error related to my useReducer function. The specific error message states: "No overload matches this call..." and provides details on how the parameters are not compatible. import React, {useReducer ...
I have been working on displaying data from my database and encountered a problem. Everything was working fine with hooks, but when I tried to implement CRUD operations using redux and hooks, it started returning undefined values on every render. Upon inve ...
I have encountered an issue with updating a FlatList component in my React Native application. The scenario involves running a graphql query to render items and then refetching the data when a mutation is executed using Apollo's refetch option. Althou ...
I'm currently working on incorporating audio recording into my Next JS app and could use some guidance. I found a helpful resource at: At this stage, I have the following code snippet: ... const mrRef = useRef(null); ... mediaRecorder = new MediaReco ...
As a newcomer to react, I am exploring a modal component import React, { useState, useEffect } from 'react'; import { Modal, Button } from "react-bootstrap"; function TaskModal(props) { return ( <Modal show={pro ...
I have a page that features a control panel for modifying the content on display through Switch-Route. The code structure is as follows: <div className="controls"> some controls here </div> <Switch> <Route exact path=&apo ...
My current URL contains the following: http://example.com/callback?code=abcd I am trying to extract the value of "code." Here is the React code I have written: import React from 'react'; import { useEffect } from 'react'; const Callback = () => { useE ...
Having trouble displaying data retrieved from an API. Initially, the movie titles are shown without any issues. However, upon refreshing the page, an error message stating "cannot map undefined" appears. Here is the code snippet: const [media, set ...
After using useEffect to fetch data, I encountered a problem in passing the data to my component. Here is some of my code: User Data Types (UPDATED) export interface IUser { display_name: string; id: string; images: Image[]; } expo ...
I'm trying to learn React by implementing a basic shop. One idea I had was to have multiple product images and when a user clicks on an image, it flips around to display additional information such as comments and ratings for the product. For this project ...
Within the React context provider, a ref is established to be utilized by another component for setting a blur event listener. The issue arises when the blur event fails to trigger the listener. The following is a snippet of code from the context provider ...
Upon mounting the component, I fetch a list of testsuites through an API call, which returns the list in chronological order. I then set these options as choices for a select dropdown using Material-UI. Next, I set the selected option to the latest testSui ...
After reviewing the React documentation, it appears that componentDidMount is now implemented using hooks as shown below: useEffect(() => { // your code here }, []) For example, if you wish to make an API call within this hook: useEffect(() => { ...
I am currently working on customizing the TextField component in material-ui to display text in uppercase. Instead of repeatedly adding inputProps={{ style: { textTransform: 'uppercase' } }} to every instance of TextField, I decided to create a theme for m ...
I am working on validating phone number input within a React JS component using an if/else statement. If the user enters letters instead of numbers, I want to display a message saying "please check phone number". While I have been able to create a function ...
This code snippet demonstrates the usage of useEffect in a React component. import { useSession } from '@supabase/auth-helpers-react' const session = useSession() useEffect(() => { if (session) { console.debug('stay in page') } else ...
I need some guidance on this issue: My scenario involves a parent React component and its child. The parent component contains a table, while the child has its own controls. What I am trying to achieve is the ability to click on a cell within the parent&a ...
On my hero section, I have implemented some animations using framer.motion that I only want to display on the initial load. To achieve this, I attempted to use useState and useEffect along with local storage to keep track of whether or not the animations ...
Is there a way to create a button that can expand or collapse all tabs in an ant.design Collapse component? I attempted to modify defaultActiveKey but it seems like this can only be done during page rendering. If possible, could someone share a code snip ...
Recently, I have been experimenting with implementing react-hooks useState in material-ui/tabs component. While I have been successful in using the handleChange function, I am eager to explore and master the use of hooks in this scenario. Interestingly, my ...
I am currently developing a next JS application and utilizing react states within it. My goal is to incorporate a line break in a string value of the state. I have experimented with several methods like the ones below, but none seem to be effective: setS ...
I am currently utilizing a font-picker-react package to display fonts using the Google Font API. Whenever a new font is chosen from the dropdown, my goal is to update a field value accordingly. While the 'value' updates correctly within the ...
I've programmed the box container to adjust dynamically based on input changes. For instance, if I entered 1, it will generate one box. However, if I modify the input to 2, it mistakenly creates 3 boxes instead of just 2. import React from 'react'; impor ...
I have an array called data.info that gets updated over time, and my goal is to replace placeholder rendered elements with another set of elements. The default state of app.js is as follows: return ( <Fragment> {data.info.map((index) =&g ...
TL;DR : I am in the process of converting my class-based App component to a Functional component but encountering unexpected outcomes with the useEffect Hook. Being relatively new to React, I originally built my movie search app using a class-based approa ...
As I was pondering how to avoid deep nesting of props, it struck me: "why not export objects instead of using React context?" For instance, rather than writing: const handleClick = event => { event.preventDefault(); doSomething(); }; const calcPri ...
To display a component when the input is focused, follow the steps below: Click here for not focused state When you click on the text input, the component should appear like this: Click here for focused state The code snippet provided works correctly. ...
I'm currently running an asynchronous operation with a callback function (using IPFS in this scenario, though the specific tool isn't crucial), and am attempting to update state using hooks within that callback. However, for some reason the code ...
'use client' import React, { useCallback, useEffect, useRef, useState } from 'react' import { Observer } from 'gsap-trial/Observer' import gsap from '@/utils/gsap' type Props = {} const TestPage = (props: Props) => { const [test, setTest] = useStat ...
Coming from a background in Vue, I am struggling to comprehend how to conditionally show something when the HTML is fragmented into different parts. Imagine having this structure: import React, { useState } from "react"; const [mobileNavOpen, setMobi ...
My interface declaration for StopData is shown below: export interface StopData { stopName: string, stopType: 'stop' | 'waypoint' } I have implemented a radio group to choose the 'stopType', which consists of two radio buttons. One with the value ...
I want to initialize a value k using the useState hook only once and trigger the useEffect hook after the component mounts. The useEffect callback will create an intersection observer to update the state of k when needed, causing the component to re-render ...