Im using ace Editor in my react app and am getting the above error. I want to put the contents of the Ace Editor IDE that im using in my react app from a function call which is triggered through a submit button.
<AceEditor
ref='aceEditor'
height='100%'
width='100%'
mode={ideLanguage}
theme={ideTheme}
fontSize={ideFontSize}
showGutter={true}
showPrintMargin={false}/>
And this is the button
<Button
type='button'
buttonStyle='btn--primary--normal'
buttonSize='btn--medium'
onClick={SendCode}
>SUBMIT</Button>
And this is the function
const SendCode = () => {
console.log(this.refs.aceEditor.editor.getValue());
};
What am I doing wrong??
String refs are legacy way to set a DOM reference.
With latest React release, it is advisable to use React.useRef()
hook for functional components and React.createRef()
for class components.
You can read more details at - https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
And I can guess, you might have turned on the strict mode with <React.StrictMode>
higher-order component. Thats' why there is an error/warning thrown.
What you should do -
Declare a ref variable.
const aceEditorRef = useRef();
After that , replace ref='aceEditor'
with ref={aceEditorRef}
.
<AceEditor
ref={aceEditorRef}
height='100%'
width='100%'
mode={ideLanguage}
theme={ideTheme}
fontSize={ideFontSize}
showGutter={true}
showPrintMargin={false}/>
Use aceEditorRef.current to get DOM reference
const SendCode = () => {
console.log(this.aceEditorRef.current.editor.getValue());
};