React Form not updating state onChange

Asked
Active3 hr before
Viewed126 times

8 Answers

statereact
90%

You losing state on handleChange while expecting it to merge with the current one, but it is not how useState works in contradiction to this.setState in class components:,Connect and share knowledge within a single location that is structured and easy to search.,Unlike the setState method found in class components, useState does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax.

You losing state on handleChange while expecting it to merge with the current one, but it is not how useState works in contradiction to this.setState in class components:

// Results new state: { data };
setState({
   data: state.data + 1
});

// Instead update the copy of the state.
// Results new state: { data, Name, Email, City }
setState({
   ...state,
   data: state.data + 1
});
load more v
88%

In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().,Overall, this makes it so that <input type="text">, <textarea>, and <select> all work very similarly - they all accept a value attribute that you can use to implement a controlled component.,In React, a <textarea> uses a value attribute instead. This way, a form using a <textarea> can be written very similarly to a form that uses a single-line input:

<form>
   <label>
      Name:
      <input type="text" name="name" />
   </label>
   <input type="submit" value="Submit" />
</form>
load more v
72%

How do you capture data from input fields in React components?,How do you update the state of a React component?, Creating Interactive Components Finish reading about state and move on to the next section!

var Water = React.createClass({
    getInitialState: function() {
        return {
            currentTemp: 10
        };
    },

    render: function() {
        // empty variable that will hold either "Liquid", "Solid", or "Gas"
        var stateOfMatter;

        // If temp is on/below freezing, it's a solid
        if (this.state.currentTemp <= 32) {
            stateOfMatter = 'Solid';

        // if temp is on/above boiling, it's a gas
        } else if (this.state.currentTemp >= 212) {
            stateOfMatter = 'Gas';

        // otherwise it's just a liquid
        } else {
            stateOfMatter = 'Liquid';
        }

        return (
            <div>
                <p>At { this.state.currentTemp }°F, water is considered to be a "{ stateOfMatter }" state of matter.</p>
            </div>
        );

    }
});
load more v
65%

React this.setState, and React.useState create queues for React core to update the state object of a React component.if(typeof __ez_fad_position != 'undefined'){__ez_fad_position('div-gpt-ad-linguinecode_com-medrectangle-3-0')};,React this.setState, and useState does not make changes directly to the state object.,How do you perform an action after React.useState hook has triggered?

If you’re using a class component, you will have to usethis.setState() to update the state of a React component.

this.setState(state, callback);
load more v
75%

In this example, if you click the button, the input will be updated; however, the text in the paragraph will not.,In our fix, we first call the original native value setter that React overloaded. This will update the input state. Once updated, we dispatch a new change event on the input, so React will trigger a new re-render as the input value will be different from the component's state.,The fix when using a third-party input as a Controlled input is to manually trigger a DOM event a second time to trigger React to re-render. React will de-duplicate updates if an event fires and the state haven't changed. By triggering the second event, we can force a new Render cycle.

By default, HTML inputs retain their internal state and emit an event when that state has changed due to user input. Controlled inputs in React will manage the input state and ensure the input state is only managed within React. This ensures that there is only ever one copy of the form state value in the component. However, while reducing state is good, it causes issues with how native inputs behave. Let's take a look at an example:

import React, { useState } from 'react';import { render } from 'react-dom';function App() {  const [input, setInput] = useState(Math.random().toString());  function setNativeInput() {    const input = document.querySelector('#input');    // This will update the input but the state in React will not be updated.    input.value = Math.random().toString();  }  return (    <div>      <label htmlFor="input">Input:</label>      <input id="input" type="text" value={input} onChange={e => setInput(e.target.value)} />      <p>value: {input}</p>      <button onClick={() => setNativeInput()}>Set Native Input Value</button>    </div>  );}render(<App />, document.getElementById("root"));
load more v
40%

Changing the state of the TextArea or TextField not updating the value inside input.,The issue which causing this error may be this https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html,And this causing the derived state issue.

export default class PlaygroundScreen extends Component {
  state = {
    value: '',
    textAreaKey: Date.now()
  };

  render() {
    return (
      <View flex padding-20>
        <TextArea
          key={this.state.textAreaKey}
          placeholder="Enter text"
          value={this.state.value}
          onChangeText={(value) => this.setState({value})}
        />

        <View center flex>
          <Text>{this.state.value}</Text>
          <Button label="Clear" onPress={() => this.setState({value: '', textAreaKey: Date.now()})}/>
        </View>
      </View>
    );
  }
}

load more v
22%

Pretag
 Pretag team - issue, fix, solve, resolve
60%

As you can see, we set up a kind of circular data flow: state to input value, on change event to state, and back again. This loop allows us a lot of control over the input, as we can react to changes to the value on the fly. Because of this, controlled inputs don’t suffer from the limitations of uncontrolled ones, opening up the follow possibilities:,instant input validation: we can give the user instant feedback without having to wait for them to submit the form (e.g. if their password is not complex enough),As I mentioned above, the continuous update loop of controlled components makes it possible to perform continuous validation on inputs as the user types. A handler attached to an input’s onChange event will be fired on every keystroke, allowing you to instantly validate or format the value.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "state-react" queries related to "React Form not updating state onChange"