Así que estoy tratando de insertar un editor de código en mi aplicación web. Estoy tratando de importar y agregar una instancia de Codemirror. Cada vez que agrego código JSX para un componente de CodeMirror, se duplica. Aquí está mi código de componente.
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;Como puede ver en la imagen, hay dos editores que se están renderizando. uno donde se ha ingresado el valor predeterminado que configuré y otro que tiene una línea vacía en blanco. No estoy seguro de por qué ocurre esto.