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

react-bootstrap-table2 pagination is not working with useState

I am using react-bootstrap-table2 pagination in my react application.I am using a state to update the sizePerPage dynamically.But it is not working. When I console the state, I am able to see the change, but it is not updating the pagination. Here…
ajo
  • 15
  • 1
  • 1
  • 7
0
votes
1 answer

Onclick event push new item into array but the item is only pushed on the next click

I am trying to push the new item, or setState in React, after a click on the target. I console.log the event.target and it returned what I expected. However, it is not added to the array immediately. Only after the next click, the array is updated,…
0
votes
3 answers

React JS useState hook not working with curly braces

Can someone explain why this code won't run properly with curly braces around prev + 1 in the increment function? export default function Counter() { const [clickCount, setClickCount] = useState(0); useEffect(() => { …
Dany
  • 1
0
votes
2 answers

INPUT MANAGEMENT IN REACT FORM

i'm coding a dynamic react form. I want to be able to print a field value, update the state according to it's value changes, and all of that while i'm typing inside that field. I also want to print the state in the console by clicking on the submit…
0
votes
4 answers

How can I change boolean property on array object depending on which element was clicked

const [task, setTask] = useState([{name: 'name1', isChecked: false}, {name: 'name2', isChecked: false}]) I tried this way but it changes on every object: const handleCheck = (toggle) => { setTask(prevState => prevState.map(item => ({ …
ReVeng
  • 13
  • 2
0
votes
0 answers

What is the best way to set a new filteredImages array with useState?

What is the best way to set a new filteredImages array with useState? I notice I’m doing return attachments.filter(attachment => { … twice, so wondered if I can do it once. const [filteredImages, setFilteredImages] = useState(() => { return…
Happy1234
  • 537
  • 3
  • 15
0
votes
1 answer

how to hold the state of an array of inputs with unknow length

so i want to store the state of an array with an unknown length. so basically the user can choose between 2,3 or 4 players and then he will be asked to enter their names the problem is that i couldn't find a way to store their names inside a value…
mouhib
  • 85
  • 1
  • 8
0
votes
1 answer

setting a useState to true when the current value is already true causes re-render

const [ready, set_ready] = useState(false); ... if (condition === true) { set_ready(true); } The code above causes infinite loop. But if I changed it to if (condition === true && !ready) { set_ready(true); } The the problem is fixed. This…
0
votes
1 answer

ReactJS/NextJS - useState crashes tab

At line #27, setOpenAddFolders(true) causes the whole tab to freeze. I have tried everything and searched everywhere, nothing. I used similar code (set a usestate var) in a different file, it works, but the code below just won't work. I did also…
user19474938
0
votes
1 answer

how to access value of object using useState hook in reack

This is api of movie which contain movie as key and movies detail as object Now I have get the values of movie in useState but I not able to figure out how exactly I can get the details { "movies": [ { "Name":"The Forever Purge", …
0
votes
1 answer

Input field not cleared after using useState with onClick

I have a React app, where I'm using an input field as a searchbar, which upon typing, returns a list of products, and upon clicking any product takes you to that product page. I want to clear the typed text in the searchbar after the redirection to…
user19367608
0
votes
2 answers

How to fill a state with an array

I'm trying to add a list inside a state using the set method, but my state remains empty App.js // Starts the screts word game const startGame = () => { // pick word and pick category const { word, category } = pickWordAndCategory(); …
0
votes
1 answer

Unable to update useState by passing & rendering objects

When I am trying to compile my App.jsx file, it gives the following error-: Uncaught Error: Objects are not valid as a React child (found: object with keys {present1}). If you meant to render a collection of children, use an array instead. import…
0
votes
1 answer

How to resolve root rendering issue with window size set in useState after server render?

After deployment to server and testing in Gatsby with gatsby clean && gatsby build && gatsby serve whenever root (https://foobar.com/) is visited anything that relies on my ThemeProvider for dimensions doesn't render correctly. After debugging I've…
DᴀʀᴛʜVᴀᴅᴇʀ
  • 7,681
  • 17
  • 73
  • 127
0
votes
1 answer

DateTimePickerModal On Working on Android

I have used react-native-modal-datetime-picker to create a calendar view. I have created a state, birthDate to set my date using onChange function in DateTimePickerModal. The problem is the date is getting picked on IOS device but while picking the…
RoboCop
  • 5
  • 1