Questions tagged [use-state]
React Hooks revolutionize the way developers harness the power of state(s) and leverage other critical lifecycle features in React, all without resorting to writing class-based components.
I am facing a coding challenge with my cards state variable in React using the useState hook. I tried adding my array data to it but ended up with an empty array. Placing the state inside an if statement resulted in undefined variables. I attempted various ...
I have been working on implementing the search bar feature from the provided link. Despite my efforts to match the types correctly, I keep encountering a TypeScript error. Homepage.tsx const [searchQuery, setSearchQuery] = useState(query || '' ...
When working with my React app, I encountered a situation where I needed to access state values inside setTimeout() and setInterval(). However, due to closures being bound to their context once created, using state values in these functions would not refle ...
Using DataGrid Material UI, I am facing an issue where the selected row is not being deleted when clicking on the delete button. The problem arises from setting the ID value in the useState hook and encountering asynchronous behavior in deleting the rows. ...
I have a dilemma with two separate components stored in their own files. One of them is meant to be reusable, so I want to keep them separate. However, I need to update a specific hook within the "child" component from the "parent" component. Passing a val ...
Having trouble sending my form data to an API with this code: const handleSubmit = () => { setData({ ...data, apellidoParterno: inputs.apellidoParterno, apellidoMaterno: inputs.apellidoMaterno, ...
My problem is that when I use useState, I am receiving incorrect numbers For example, if I print e.target.value it might display 1, but my selectedIndex shows 2. Similarly, when I have a selectedIndex of 0, it retrieves something different like 1. Any tho ...
const [data, setData] = useState([]) //Assume pdfData is of type Uint8Array with a length of 403970 setData(prevState => [...prevState, pdfData]) I have attempted to update the array using this method, but it is not yielding the desired outcome. Is t ...
Obtained from the API, I have a collection of buttons that are displayed for filtering: For instance: button2 button4 button5 Assuming there are a total of 5 buttons. button1 and button3 are supposed to be in a disabled or inactive state (appearing ...
How can I implement a toggle functionality for Bookmarked Meals on my Meal Recipe Website available at ? I am currently using the logic to set data.meals[0].bookmarked to true or false, but I want to use setState instead in order to rerender the page when ...
Struggling with using the useState hook in React, I want to initialize it with an incoming props value (startDate). However, it always defaults to the current date. What mistake am I making? Here's my code snippet: export type CalendarProps = { startD ...
I'm facing an issue where the array saved to a useState state is not updating properly. Despite properly returning values for the variable first, the variable "data" remains an empty array. Interestingly, adding a console.log("restart") statement under li ...
I have created a basic accordion component for my product page in a Next.js/react app. It is functioning mostly as expected, but I am facing an issue. When a user clicks on a new accordion item, I want the currently active one to close automatically. Below ...
I am facing an issue with an unchecked checkbox in my project. I am attempting to update its value based on data retrieved from an object. The object contains boolean values from an SQL query, either 'T' for true or 'F' for false. My in ...
I am encountering an issue with a component where I pass a useState setter to a utility function: export interface IData { editable: string[]; favourited: string[]; } const [data, setData] = useState<IData | undefined>(undefined) useEffect(() = ...
I created an autoplay Slider with three cards using the useEffect hook. However, the manual "previous" and "forward" buttons are not functioning correctly. The useState function is not updating values as expected, leading to unexpected changes in state. ...
Currently in the process of developing a React NextJS application integrated with MaterialUI. I have a header component that contains a switch element intended to facilitate toggling between dark and light modes within my theme file (which is a separate en ...
I am currently working on developing a wordle-style game using react. Within my main component, I have implemented a useEffect that executes once to handle initialization tasks and set up a "keydown" event listener. useEffect(() => { //The getWor ...
I'm encountering an issue with obtaining the updated state data within a functional component. While I've come across threads on SO suggesting switching to a Class component for better state management without hooks, I believe it should be achievable using ...
I am experimenting with React to allow users to click the heart icon to like or unlike a movie. I'm using useState() and useEffect(), but even though the element gets a new class name, the color doesn't change when clicked. https://i.stack.imgur.com/blbWJ. ...
I'm trying to figure out how I can avoid running an API call in my component on initial rendering. The prop needed for the API call should be updated only after a form submission. Although I have included the prop in the dependency array of useEffect, th ...
I am attempting to map an array within an object and encountering some challenges. The structure of the object is as follows: const data = {data: (6) [{…}, {…}, {…}, {…}, {…}, {…}], page: 2, per_page: 6, total: 12, total_pages: 2} I have been ...
I am currently facing a challenge with an infinite scroll listview in react native. I have created a calendar list that needs to dynamically change based on the selected company provided as a prop. The issue arises when the prop (and the myCompany state) a ...
Currently, I am working on developing my initial user signup form, and I have encountered a challenge that seems relatively simple to resolve but goes beyond my current expertise. The issue pertains to the helperText for an MUI select component which is no ...
I am currently working on a function that populates a useState array containing objects representing cars. These cars appear on the left side of the screen and move across until they are off-screen. My goal is to remove these cars from the state array once ...
I am currently developing a React application that is responsible for fetching data from an API. This API requires Bearer Token Authorization. To handle this, I have implemented useState() hooks for both the token and the requested object. Additionally, th ...
I am currently working on a component where I need to capture the previousState of an element. However, no matter what I try, it keeps returning the initial value. This suggests that there is some re-rendering happening, causing it to constantly default to ...
In an intriguing React Hooks experiment utilizing useState(), a peculiar behavior was observed when the + button was clicked. The number displayed started alternating between 7001 and 7000, eventually flashing rapidly through various numbers. Surprisingly ...
I am currently utilizing a Material UI select component that is populated with data from an array containing values and options. Within this array, there exists a nested object property named "setFilter". The setFilter property holds the value of setState ...
I am currently working on a responsive web player app using react-player to gather stats on playedTime and other data by utilizing a callback prop called onProgress. However, I encountered a Parsing Error when trying to use useState, which displayed an U ...
https://i.stack.imgur.com/cytjJ.png Hello there, I'm curious to know about the state loading functionality. Can someone explain what purpose is served by using "setLoading(true)" in axios? Appreciate your help! ...
Just starting out with React and experimenting. I have 3 toggle switches on one screen. Should I have a distinct state handler for each switch? Currently, I am using only one, but it's clear that this approach won't work as expected because isChecked is s ...
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 ...
Hi there! I've created a tab feature that should change its state with each click on the button. Unfortunately, it seems to be changing state globally instead, resulting in multiple tabs appearing at once with just one click. function Tabs() { const [c ...
Hey there! I've got some code that's pretty straightforward and not too complicated, so please take a moment to read through it. (I'm using React with Next.js) First off, in the root file app.js, there's a useEffect function that fetch ...
import React, { useState, useEffect } from 'react'; Grabbing my custom hooks function useFetch(url, defaultResponse) { const [data, setData] = useState(defaultResponse); async function getDataFromAPI(url) { try { ...
I am constantly generating random numbers every 2 seconds and checking if these numbers exist as keys in my state object called data. If the number is found, I increment the value associated with that key; otherwise, I add it as a new field with a defaul ...
After implementing the useEffect hook in React, I am noticing an unusual output on the browser. The counter, which is supposed to increment every 1 second, gets stuck after reaching 10. If you could take a moment to review the code and test it on any onlin ...
Currently, I am working on integrating infinite scroll functionality in React, where I need to fetch data from a backend API for loading content on the next page. The challenge I'm facing is that my state is set as an object using useState, and I need to u ...
I have been working on developing a timer application using React. The functionality involves initiating a setInterval timer when a user clicks a specific button. const [timer, setTimer] = useState(1500) // 25 minutes const [start, setStart] = useState( ...
I'm currently working on a web application with React and Material UI, which includes a registration form. After submitting the registration form successfully, I want to display a success message at the top of the page. To ensure consistency across m ...
Apologies for coming back with another question so soon, but I'm struggling here! I spent hours yesterday trying to figure out how to pass data from a child component to its parent using React hooks, but my brain just won't cooperate. What I'm aiming for ...
For the past couple of days, I've been struggling with an issue and I can't seem to figure out what I'm doing wrong. My goal is to create a login page that redirects users to the dashboard after they log in. To maintain consistency across the applicati ...
The structure of the nested state object is as follows: key1: { key2: [ { field1: "value", field2: ["value", "value"], field3: [ { ff1: "val", ...
Having an issue with my simple Input file type in React. I'm storing the selected file in state, but when I click the clear button, the state doesn't actually get cleared. This leads to {selectedFile.name} throwing an undefined error if the user cancels th ...
I'm facing a challenging task of creating a React card grid with a filter. The data is fetched from an API I developed on MySQL AWS. Each card has a .tags property in JSON format, containing an array of tags associated with it. In App.jsx, I wrote Jav ...
Is there a way to automatically refresh the card component after submitting data without having to manually refresh the page? I've tried using useEffect but it's not updating the data even though the value is changing. Any suggestions on how to resolve thi ...
My program is designed to allow users to input multiple grades and modify each grade as needed. I am currently facing difficulties in updating individual elements within the array. Below is the main function of my program: import React, {useState} from &qu ...
Struggling to get a useEffect hook to trigger when its dependency is a useContext variable. The Context contains an "update" variable that changes, but the effect doesn't fire as expected. import { useEffect, useState, useContext } from "react" import ...
I'm attempting to pass Props to React useState Hooks. Both of my props are required and should be numbers, but I keep receiving a Typescript error stating: Type 'string' is not assignable to type 'number'. TS2322 However, I am ...
Currently, I am in the process of developing a web application using Next.js and Tailwind CSS. My goal is to pass a set of data between methods by utilizing useState. However, I have encountered an issue where the application loads indefinitely with excess ...
I'm puzzled by the fact that autocomplete clears the selected value, while the logic for selecting a value works perfectly fine. Check out this sandbox example to see what I mean: sandbox example ...
Hello there, I need some assistance with a problem I'm facing. Here's the scenario: I have a checkbox and an array of objects retrieved from an API request: const ownRequest= [ {status: "pending", type: "aaa"}, {status: "pending", type: "bbb"} ...
Is there a way to show specific content when a particular button is clicked? I have three buttons named "BBQ", "Bilao", and "Chicken", each with their own unique content that should be displayed when the respective button is clicked. The issue I am facing ...
Currently, I have a component from line 61-67 that controls the state of an editIcon. The issue is that it changes the state values for all items in the column, rather than just the specific item or row it should apply to. When hovering over a span element ...
I'm currently working on my quiz page where all answer options change color when clicked. However, I only want the selected answer option to be colored based on its correctness. The data is being retrieved from a data.json array. export default function Qu ...
In a certain file, I have defined an object with the following structure: export const items = { first: false, second: false, third: false } Within a component, I am using this object as shown below: import { items } from 'file'; const [elements, se ...
I need to toggle the active class on click, setting it to a local state and changing all other objects in the state to inactive. const [jobType, setJobType] = useState([ { "class": "active", "type& ...
I have a specific scenario in my code where I am using the useState setter function in React to update a value on line 5. Everything seems to be functioning well without any errors, but I'm curious about something. Since setState updates the state and tr ...