Chester Chester -4 years ago 246
React JSX Question

Ace Editor clearing on react render

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 Source

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"
    defaultValue={this.state.newValue}
    editorProps={{$blockScrolling: true}}
  />,
  document.getElementById('example')
);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download