securingsincity / react-ace

React Ace Component
http://securingsincity.github.io/react-ace/
MIT License
4.08k stars 604 forks source link

How to update control with new data programmatically - question #353

Closed LaurieSReynolds closed 6 years ago

LaurieSReynolds commented 6 years ago

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


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
LaurieSReynolds commented 6 years ago

Ah, never mind. I see there is a value prop which works as expected :-)

https://github.com/securingsincity/react-ace/blob/master/src/ace.js