Stack Overflow
Stack Overflow

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
3
votes
2 answers

React: Pass State To Siblings

I have created a controlled component that constrains an input field to only 4 numbers. These numbers can be changed at any time and any time the number is four digits I want the result to be passed to a sibling component to action. I am sending the…
SteveW
  • 337
  • 4
  • 11
3
votes
2 answers

Can't access to a state object (React useState hook)

I'm trying to access to a state object that has a property called allMemes. After fetching the json data, it will return array of 100 elements. Then the other property is to use this array to get a random number out of the length. So far I keep…
allaroundcoder
  • 169
  • 1
  • 11
3
votes
4 answers

How sort rendering of products by value?

I have array of objects products like [{name: 'apple', value: 100}, {name: 'watermelon', value: 200}, {name: 'orange', value: 50}], and a select input with "High price" and "Low price" options, but it doesn't works: function ProductsPage() { …
Víctor Donat
  • 47
  • 7
3
votes
2 answers

How do we check the boolean value in useEffect in react hooks?

I have received the boolean value and set to setNomStatus, but how can I check if that is true to show setShowCalender(true) ? const [nomStatus, setNomStatus] = useState(false); useEffect(() => { const fetchData = async () => { const…
soccerway
  • 10,371
  • 19
  • 67
  • 132
3
votes
2 answers

how to use onChange on array of objects to add data in ReactJS

I am new in ReactJS world, I want to update my useState hook which contains array of objects, but it is now updating the data according to my requirement please help me in this. ContactForm.js function ContactForm() { const [user, setUser] =…
Piyush Jiwane
  • 179
  • 3
  • 13
3
votes
5 answers

How to change/add value of a certain row of an array using useState Hook in React

I have a following array, const bio = [ {id: 1, name: "Talha", age: 26}, {id: 2, name: "Ayub", age: 22} ] Here is a complete code of mine, import './App.css'; import React, {useState} from 'react'; const bio = [ {id: 1, name: "Talha", age:…
Awais Shahid
  • 117
  • 4
  • 15
3
votes
2 answers

How to start and stop timer display in ReactJS

I am trying to create a Pomodoro timer in ReactJS. I am having trouble having the timer to stop it's countdown. PomView.js const PomView = () => { const [timer, setTimer] = useState(1500) // 25 minutes const [start, setStart] =…
calveeen
  • 621
  • 2
  • 10
  • 28
3
votes
5 answers

How to append to state array in React hooks?

I have a state set as const [filteredProducts, setFilteredProducts] = useState([]); I want to be able to append to the end of that state. I am currently trying products.forEach((product) => { if (product.category === category) { …
Tim Taylor
  • 81
  • 1
  • 7
3
votes
3 answers

React useState with state that updates based on props

I have a functional React component that roughly looks like this: const MyComponent = (prop1) => { const [myState, setState] = useState(prop1) return <> {myState &&
Some text...
}
setState(true)}>Click…
internet
  • 303
  • 3
  • 19
3
votes
2 answers

React Typescript: Element implicitly has an 'any' type because index expression is not of type 'number'

I am trying one make simple voting app. My app works fine. I have decided to make my app in Typescript. I am beginner level in Typescript. I pass arrays of string to the app component then. I create a sort function where it will get most voted and…
Krisna
  • 2,854
  • 2
  • 24
  • 66
3
votes
3 answers

Which is more efficient: use of many useState hooks or one useState for often updated object?

I am trying to understand which way of using useState hook is a better practise. Please consider these two examples of a simple React component: multiple useState hooks const Cake = () => { const [topping, setTopping] = useState(''); const…
Zuzu
  • 75
  • 7
3
votes
1 answer

Delete elements in state array element in useEffect hook using props values

I am trying to delete items from state variable in useEffect using the props comming to the component. I want to take initial values from state variable and then delete elements in that array and set the state variable again to new value. But When I…
user11823877
  • 143
  • 1
  • 15
3
votes
2 answers

waiting for useeffect to finish and then accessing object properties

I have the code below: const [files, setFiles] = useState([]); const [greeting, setGreeting] = useState(0); const [menu, setMenu] = useState([]); const [options, setOptions] = useState([]); var customer_id = 1; useEffect(() => { async function…
Juliette
  • 4,309
  • 2
  • 14
  • 31
3
votes
4 answers

How to concat the object is useState array?

I have the useState varible. I want to concat the value with new object. const [dates,setDates] = useState(["Mon","Sun"]) rules: 1.If the date exist with isSelected flag then make as false [{day:"mon",isSelected:false}] otherwise, make…
AsZik
  • 621
  • 1
  • 4
  • 20
3
votes
1 answer

TypeScript error: Property 'children' does not exist on type '{ children?: ReactNode; }'

https://www.emgoto.com/react-search-bar/ I am implementing the search bar from the link above. But I get a typescript error and I tried to match the type, but it didn't work.. Homepage.tsx const [searchQuery, setSearchQuery] = useState(query ||…
Taeeun Kim
  • 964
  • 1
  • 8
  • 20
1 2 3
…
99 100