I have a view with a list of small code snippets and a panel with the ace editor. The user should be able to select a snippet to edit.
When the user selects an initial snippet, the editor displays the data correctly. However when the user selects a different snippet, the editor does not display the new snippet. It show an empty view.
Question
How can I get the editor to update when a different snippet is selected?
I use defaultValue to set the data.
Render method for the view - list of snippets and the editor
```
render() {
return (
<div id="Snippets">
<ul className="form-fields">
<li>
<div id="ConfigEditor">
<Snippets
data={this.state.data}
currentItem={this.state.currentItem}
onCreateSnippet={this.onCreateSnippet}
onSelectItem={this.onSelectItem}
/>
<SnippetEditorContainer
currentItem={this.state.currentItem}
/>
</div>
</li>
</ul>
</div>
);
}
```
Render method for the editor. I've verified that this method is called with the new data.
```
render() {
let { content } = this.state;
return (
<AceEditor
mode="json"
theme="github"
onChange={(newValue) => {
console.log("change", newValue);
}}
name="UNIQUE_ID_OF_DIV"
editorProps={{$blockScrolling: true}}
defaultValue={content}
setOptions={{
//showLineNumbers: false
}}
width="100%"
height="100%"
/>
);
}
```
Versions
react-ace: 5.9.0
react: 16
node: 8.9.2
Really nice component!
I have a view with a list of small code snippets and a panel with the ace editor. The user should be able to select a snippet to edit.
When the user selects an initial snippet, the editor displays the data correctly. However when the user selects a different snippet, the editor does not display the new snippet. It show an empty view.
Question