0
227
ViewsCodeMirror editor duplicating
So I am trying to insert a code editor into my web application. I am trying to import and add an instance of Codemirror. Everytime I add JSX code for a CodeMirror component it duplicates. Here is my component code.
import { Controlled as ControlledEditor } from "react-codemirror2";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/material.css";
require("codemirror/mode/xml/xml");
require("codemirror/mode/javascript/javascript");
const ProblemSolving = () => {
return (
<div className="editor-container">
<div className="editor-title">
Hello World
</div>
<ControlledEditor
value="var myVariable = 5"
options={{
lineWrapping: true,
lint: true,
mode: "javascript",
lineNumbers: true
}}
/>
</div>
);
};
export default ProblemSolving;
As you can see in the image there are two editors being renders. one where the default value I set has been entered and another that has a blank empty line. I am not sure why this is happening.
·
Juan Pablo Isaza
Answer question