React-ace: ACE set the initial value, there is no wrap effect, can not format

[Bobcui001]

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.

[Aaron-Lei]

hi, JSON.stringify(this.state.modelBody, null, '\t') did not work,
when I input

and setValue( JSON.stringify(this.state.modelBody, null, '\t')), it returned:

@securingsincity

[jorgepvenegas]

@Aaron-Lei try
JSON.stringify(JSON.parse(this.state.modelBody), null, 2);

where the third param is the number of spaces you want.

[BrunoQuaresma]

Same issue of @Aaron-Lei

[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.