MobX: Update value in input field

Question

I use a simple input field which should be controlled by an @observable value:

<div>
    <input value={this.props.appState.myValue} onChange={this.handleChange}/>
    value: {this.props.appState.myValue}
</div>

After updating myValue to undefined the displayed value changes, but the value in the input field keeps the same value.

Initial state:

[initial]
value: initial

After update:

[initial]
value:

Answer 1

I would suspect you are not making your component into an observer. Try this example:

@observer
class App extends React.Component {
  handleChange = (e) => {
    this.props.appState.myValue = e.target.value; 
  };
  render() {
    const { appState } = this.props;
    return (
      <div>
        <input value={appState.myValue} onChange={this.handleChange} />
        value: {appState.myValue}
      </div>
    );
  }
}