Questions tagged [use-state]

useState related questions for reactjs hooks api.

Basic React Hook

useState

const [state, setState] = useState(initialState);

Returns a state value, and a function to update it.

Resources

useState hook reference

Common Questions/Issues

  • Why isn't React state update immediate?
  • How to access the latest value?

useState set method not reflecting change immediately

3329 questions
0
votes
1 answer

dataLoaded state only changed after page reloaded

I'm doing an API call to get some data. then I keep a useState called dataLoaded. on a successful API call I make the dataLoaded=true. but to see it changed I have to reload the page. following is my code. const [dataLoaded, setDataLoaded] =…
Ryan Fonseka
  • 233
  • 5
  • 20
0
votes
2 answers

Function in react.js needs to run twice to work

I am doing a React project with Firestore. Using API results, I want users to be able to same some as favorites. This is doable, but when you clicked first, handleFavorite() and saveFavorite() return an empty string for every field. The second time,…
0
votes
2 answers

How to access a state of an component from another component in next.js?

I have a boolean state of bgWhite. If it changes, I change the background colour. This all is in the index.js file in the pages directory. How can I access the state bgWhite from the component to do something such as changing the bg color? import {…
Nasem
  • 417
  • 2
  • 7
  • 15
0
votes
0 answers

How to prevent re-rendering upon adding new React component to form

TLDR: When I click a button to add a new element to a list of React components, it causes the entire list to rerender and lose the states in the process. How can I prevent this? I have a list of components containing a textarea and a few other form…
Ailany
  • 15
  • 8
0
votes
1 answer

Sent api response from one component to another component in react

Is it possible to sent api response from one component to another component using useState(). In GridHierarchy Componnet I want to show data in kendo TreeList. I declared useState variable.. const GridHierarchy = () => { const…
aa123
  • 1
0
votes
4 answers

How can I send the state (useState) of one file component to another file's component?

REACT.js: Let say I have a home page with a search bar, and the search bar is a separate component file i'm calling. The search bar file contains the useState, set to whatever the user selects. How do I pull that state from the search bar and give…
DaPlank
  • 21
  • 1
  • 3
0
votes
2 answers

I want to change the value of 5 when Refresh button is clicked with useState

i know i did somthing wrong, but idk what XD,, help please
0
votes
3 answers

React: after load page state is true, although useState is false

In the application, by clicking on the button, I want to do 2 things: play an audio file, show 2 pictures. After clicking the button again, I want to turn off the audio and hide 2 pictures. The audio works, but the pictures go crazy. Why? I set…
Dominika Es
  • 39
  • 1
  • 6
0
votes
2 answers

useState variable won't get set immediately inside async function

I'm trying to set a state variable inside a function, but it doesn't get set immediately. It eventually gets set, but I want to interact with the data inside the function as soon as the state is set. code: const [addresses,setAddresses] =…
0
votes
1 answer

React js useState&useEffect array duplicates elements after a change

I am a beginner in react js programming. I'm trying to do the todo project, which is a classic project. When I delete or add an element from the list, the newly formed list appears on the screen by combining with the previous one, I will show it…
0
votes
3 answers

get current useState values inside functions (w/ short, explicit codepen)

I understand (somewhat) how to use useEffect to update state, but I struggle with situations like when you need current state inside of another function, before the "nextTick" as it were. Here is a simple Codepen with the exact issue. Make sure the…
Kirk Ross
  • 6,413
  • 13
  • 61
  • 104
0
votes
1 answer

ReactJS - setting state with data fetched in use effect

I am trying to set the state of my variable with data fetched using the useEffect hook but when I call the setState() function and pass it the fetched data, the state remains null. The fetch statement works as I can log the data to the console but…
0
votes
1 answer

Typescript type of variable string yet still says it can be a string or null

I have a state that is expecting a string variable. It's a search term. I'm getting this from the search url. But even when I'm checking to see if it's a string I still get an error saying that a variable of type string cannot be string | null let…
Ivana Murray
  • 318
  • 1
  • 11
0
votes
1 answer

React updating state needs 2 clicks in order to update

Let me start off by saying that I did look for other topics but I haven't found a solution yet so I'd like to walk through this with you guys. I have a simple website with a search bar, a search result list and a div where I display the item I click…
sneaker
  • 49
  • 2
  • 8
0
votes
0 answers

How to fix a contaminated state?

Well, I'm back again, With another problem, Yay! This problem is more thinking than coding, But I will include a small part of the code that might be related. What's the problem? imaging having a website like 'MALTEGO' that takes an excel file…