Ace Editor clearing on react render

Question

I have the following react structure (I simplified it for this post):

<div>
    <div>
        <div
            <AceEditor/>
        </div>
    </div>
    <div>
        <p/>
        <hr/>
        {items}
    </div>
</div>

AceEditor is imported from the react-ace npm package and {items} is an array of varying size, created from an array in this.state. Everything works as it should except for one thing: Every time this structure is re-rendered due to changes in {items} (because of changes in the array in this.state), the text in the AceEditor is reset. No onChange event is fired and I can't seem to track the problem down to its roots.

Does anybody know what causes the problem and how to solve this?

Answer 1

Changes to the state will cause render to re-display the DOM and thus wipe out your changes anytime state is updated.

You will most likely need to store the status of AceEditor in state so it will re-display when the DOM re-renders.

function onChange(newValue) {
  // store this value in state!!
  this.setState({ newValue: newValue});
}

// Render editor
render(
  <AceEditor
    mode="java"
    theme="github"
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
    value={this.state.newValue}
    editorProps={{$blockScrolling: true}}
  />,
  document.getElementById('example')
);