ACE set the initial value, there is no wrap effect, can not format

Problem

ACE set the initial value, there is no wrap effect, can not format Version: “react-ace”: “^5.8.0”

Sample code to reproduce your issue

this.state.SimBody = {"id":123456,"name":"ACE","age":111};
<AceEditor
                    readOnly={fale}
                    onChange={this.handleGetBody}
                    width="100%"
                    height="500px"
                    mode="json"
                    theme="github"
                    name="aceCodeEditor"
                    onLoad={this.onLoad}
                    fontSize={14}
                    showPrintMargin={true}
                    showGutter={true}
                    highlightActiveLine={true}
                    value={this.state.modelBody}
                    editorProps={{
                      $blockScrolling: true,
                      enableBasicAutocompletion: true,
                      enableLiveAutocompletion: true,
                      enableSnippets: true
                    }}
                    setOptions={{
                      showLineNumbers: true,
                      tabSize: 2
                    }}/>

References

React-ace Progress on: # It will show like this I expect like this

[securingsincity]

@Bobcui001 the editor doesn’t auto format json as you describe. However to get it into that format JSON.stringify(this.state.modelBody, null, '\t'); This should pretty print the json as you describe.

[oqx]

I’m running into this issue as well. I’ll see if I can look into it when I have some extra time.

EDIT So this will happen if you’re running JSON.stringify twice on the same string. You need to run JSON.parse for each JSON.stringify, otherwise you risk adding additional slashes.

In my case, I was stringifying in both useEffect and in state management.