Estoy tratando de crear algo como un editor de texto en línea, basado en React. Me gustaría agregar cerca del área de texto un div que cuente la línea que estoy usando actualmente. Entonces, creé una función que cuenta las líneas en el área de texto, luego agregué un elemento que obtiene ese número y creo esa lista. El problema es que cuando renderizo, crea la lista correctamente, pero cuando escribo algo, no se vuelve a renderizar. El problema es que cuando escribo algo, no se vuelve a renderizar. Aquí está mi código:
const Editor = () => { const [text, setText] = useState('//'); const handleChanges = (e) => { setText(e.target.value); } const countLine = () => { let lines = text.split(/\r|\r\n|\n/); let count = lines.length; return count; } return <> <form className="editor"> <div> <li>{/*this is where i create the numbers*/} {<ul>{Array.from(Array(countLine), (e, i) => { return <li key={i}>{i}</li> })}</ul>} </li> </div> <textarea name="text" value={text} className="editorText" onChange={handleChanges} spellCheck="false" id = {bg}></textarea> </form> </> }Me gustaría que cuando haga el cambio, el código haga automáticamente la actualización del número de línea, pero no puedo trabajar con la función handleChanges, o al menos, no encontré cómo. ¿Alguien me puede ayudar? Gracias
Se resuelve agregando un nuevo valor de estado, que cada vez que hay un cambio, se recalcula. Luego, los números se recrean. Aquí está el código:
import { useState } from "react"; const Editor = () => { const [text, setText] = useState('//Your code'); const [line, setLine] = useState(1); const handleChanges = (e) => { setText(e.target.value); setLine(countLine); } const countLine = () => { let lines = text.split(/\r|\r\n|\n/); let count = lines.length; console.log(count); return count; } return <> <form className="editor"> <div> <div class="number"> <ul> {Array.from(Array(line), (e, i) => { return <li key={i}>{i + 1}</li> })} </ul> </div> </div> <textarea name="code" value={text} className="editorText" onChange={handleChanges} spellCheck="false" id = {bg}></textarea> </form> </> } export default Editor;