Questions tagged [setstate]

Use for questions relating to the [setstate] method and component/widget state management in [reactjs] and [flutter].

setState is a component method in and which updates the local component/"widget" state and triggers a re-render of the component based on the new state.

Resources

2626 questions
16
votes
8 answers

How to change text Value upon Button press in React Native?

I'm an iOS developer currently working on an experimental React Native app. I have the following code which shows a button and sample text on the screen. import React from 'react'; import { StyleSheet, Text, View , Button } from…
SeaWarrior404
  • 3,811
  • 14
  • 43
  • 65
15
votes
4 answers

Can I mutate state passed to setState function?

I know I should not mutate state directly in React, but how about situation when I use function: onSocialClick = e => { const id = e.target.value; this.setState((prevState, props) => { prevState[id] = !(prevState[id]); return…
Tomasz Mularczyk
  • 34,501
  • 19
  • 112
  • 166
15
votes
4 answers

React setState not working on first try, but works on second?

I have the handleSelection method called when a button is clicked, however, if I click the button once the state does not get set when it gets to this.setState({selectedFoods: newSelections});. Everything else in the method executes correctly (as my…
exchez
  • 493
  • 1
  • 4
  • 13
14
votes
4 answers

How do I cancel a `this.setState`?

So I know that setting state in React is asynchronous and all and we set state like this: this.setState(previousState => { return { /* some new state that uses `previousState` */ } }); So my question is: How can I cancel a this.setState? Let's…
Rico Kahler
  • 17,616
  • 11
  • 59
  • 85
14
votes
3 answers

React setState/getState and asynchronous

Why there is no async getState function in React ? Documentation tel us that setState is async. Fine, but that means we can't safely use this.state and we need an async getState as well to respect execution order. From what I understand we should…
user2668735
  • 1,048
  • 2
  • 18
  • 30
13
votes
6 answers

React Hooks: skip re-render on multiple consecutive setState calls

Suppose I have the following code: (which is too verbose) function usePolicyFormRequirements(policy) { const [addresses, setAddresses] = React.useState([]); const [pools, setPools] = React.useState([]); const [schedules, setSchedules] =…
13
votes
2 answers

useState and callback function

In the class component, the setState() method can take a callback function, but in a functional component when I give a callback to costume setState this warning occurs: Warning: State updates from the useState() and useReducer() Hooks don't support…
S. Hesam
  • 5,266
  • 3
  • 37
  • 59
13
votes
1 answer

What is the advantage of using componentDidUpdate over the setState callback?

Why is using componentDidUpdate more recommended over the setState callback function (optional second argument) in React components (if synchronous setState behavior is desired)? Since setState is asynchronous, I was thinking about using the…
bitangmi
  • 133
  • 1
  • 6
13
votes
4 answers

React - Changing the state without using setState: Must avoid it?

My code works, but I have a best practice question: I have an array of objects in the state, and a user interaction will change a value of one object at a time. As far as I know, I'm not supposed to change the state directly, i should always use…
Szalai Laci
  • 540
  • 2
  • 5
  • 12
11
votes
4 answers

React onChange is swallowing my decimal when using parseFloat

I have a simple onChange which takes the user's input pareses it and sets the state to render. Here is the code. import React, { Component } from 'react'; import './App.css'; class App extends Component { constructor() { super(); …
Chaim Friedman
  • 6,124
  • 4
  • 33
  • 61
11
votes
2 answers

React onKeyDown/onKeyUp events on non-input elements

I need to capture cmd button up and down events, in order to choose, whether to use concatenation or not in setState. How do i get these events, for example, on table element?
Taras Lukavyi
  • 1,339
  • 2
  • 14
  • 29
11
votes
3 answers

what happens in react when setState with object instance of a class

I have this fiddle let m = new Mine(); this.setState(m, () => { console.log('1:', m instanceof Mine, m.x, m.meth); // => 1: true 123 function meth() {} console.log('2:', this.state instanceof Mine, this.state.x, this.state.meth); //…
Vlad
  • 385
  • 2
  • 13
11
votes
3 answers

How to use setState() in React to blank/clear the value of an array

I am trying to clear an array, but I'm having trouble. this.setState({warnErrorTypes:[]}) I'm not sure if I am dealing with a race condition, or what the specific issue is, but I can see that the value of my array is consistently wrong in the case…
JZ.
  • 21,147
  • 32
  • 115
  • 192
10
votes
4 answers

setState conditionally in react

I know some react but I am stuck in a weird situation. I have two inputs and a button, the button should be enabled when both inputs are not empty. So, I used a state property for each input value and also one property telling me if both inputs have…
Amir Shahbabaie
  • 1,352
  • 2
  • 14
  • 33
10
votes
4 answers

react setState callback doesn't have the updated state

if monthOffset = 12 the condition will evaluate to true and update the yearOffset state to 2017 if yearOffset = 2018. Based on the react docs and other answers I've read, the callback function in this.setState fires after the state has been updated,…
Ryan Sam
  • 2,858
  • 4
  • 19
  • 30