React TextArea value not automatically updating as expected

Question

So I was playing around in React and tried to make an app where you can display and modify any property in the component state, from the component itself. Basically, you enter a key (eg "foo"), and then the app will load the current value at that key (eg this.state["foo"]) into a textarea, where you can modify the value.

Here is the sandbox: https://codesandbox.io/s/twilight-bird-6z6cx And here is the code used in the sandbox:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  state = {
    inputVal: ""
  };
  onKeyInputChange(e) {
    this.setState({ key: e.target.value });
  }
  onValInputChange(e) {
    this.setState({ [this.state.key]: e.target.value });
  }
  render() {
    return (
      <div className="App">
        <div>
          key: <input onChange={this.onKeyInputChange.bind(this)} />
        </div>
        <div>
          value:
          <textarea
            onChange={this.onValInputChange.bind(this)}
            value={this.state[this.state.key]}
          />
        </div>
        <h2>key: {this.state.key}</h2>
        <h2>value: {this.state[this.state.key]}</h2>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Notice how the <textarea>'s value and the <h2>'s value are both set to this.state[this.state.key], so they should always show the same value. However, if you change the text value at say, key "foo", and then change to key "fooo", the h2's value will change but not the textarea. To put it more clearly:

type "foo" into the key input field
type "hello world" into the textarea
type "fooo" into the key input field
notice how the <h2>'s value is now blank, but the textarea still shows "hello world"

Dacre Denny · Accepted Answer · 2019-08-29 02:40:06Z

7

To resolve this issue, make sure that you're passing a "non-undefined" value to the textareas value prop which will cause the textarea element to update as expected.

A simple solution would be to pass an empty string for value in the undefined case which can be done like this this.state[this.state.key] || "":

<textarea onChange={this.onValInputChange.bind(this)} 
          value={this.state[this.state.key] || ""} />

Here's a working codesandbox

edited Aug 29, 2019 at 2:40

answered Aug 29, 2019 at 1:55

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joseph D. · Accepted Answer · 2019-08-29 02:16:29Z

2

If this.state[this.state.key] is undefined the controlled input (textarea) becomes editable.

This would mean that the value from the previous render will be retained.

You can play around with these conditions to prove:

// editable - value is retained
value={this.state.key === "foo" ? this.state[this.state.key] : null} 

// non-editable
value={this.state.key === "foo" ? this.state[this.state.key] : ""}

So to fix this, assign an empty string when this.state[this.state.key] is undefined.

<textarea
  onChange={this.onValInputChange.bind(this)}
  value={this.state[this.state.key] || ""} // if undefined, an empty string will be supplied
/>

answered Aug 29, 2019 at 2:16

Joseph D.

12.2k4 gold badges40 silver badges72 bronze badges

Comments

Adnan Saify · Accepted Answer · 2019-08-29 04:49:16Z

1

If you do console this.state[this.state.key] you can see the undefined is being returned and if undefined is returned react does not know that what happened with your input and hence it does not update the textArea value.It is recommended to always pass an empty string instead of an undefined value.

similar issue discussion on github -> https://github.com/facebook/react/issues/6222#issuecomment-194061477

Try to use arrow function , you do not need to bind the functions.

Working Example sandbox

answered Aug 29, 2019 at 4:49

Adnan Saify

363 bronze badges

1 Comment

woojoo666 Over a year ago

thanks for linking the github issue, I was looking for that

Collectives™ on Stack Overflow

React TextArea value not automatically updating as expected

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related