Estoy tratando de crear un área de texto donde la entrada del usuario se convertirá en 2 líneas separadas (li) si la longitud del texto es mayor que 10.
import { useState } from "react"; import "./styles.css"; export default function App() { const [area, setArea] = useState([]); const [newText, setNewText] = useState([]); const onChange = (event) => { let val = event.target.value; //convert to array const arr = val.split(""); setArea(arr); }; const changeNewText = () => { setNewText(area); }; return ( <div className="App"> <textarea onChange={onChange} /> <br /> <br /> <button onClick={changeNewText}>change text</button> <br /> {newText.length < 10 ? newText : "text is too long"} </div> ); }Actualmente, solo puede mostrar texto si la longitud del texto es inferior a 10; sin embargo, si es mayor que 10, mostrará 'el texto es demasiado largo'.
¿Cómo harías para dividir el texto en dos líneas?
Por ejemplo, digamos que la entrada de texto del usuario
Hello, the earth revolves around sun.debe compilar para
- Hello, the - n earth reambas líneas deben ser un elemento div o li.
Puedes usar una cadena de fragmentos
ArrayString = str.match(/.{1,10}/g);El código debería ser así.
import { useState } from "react"; import "./styles.css"; export default function App() { const [area, setArea] = useState([]); const [newText, setNewText] = useState([]); const onChange = (event) => { let val = event.target.value; //convert to array const arr = val.split(""); setArea(arr); }; const changeNewText = () => { setNewText(area); }; ArrayString = newText.match(/.{1,10}/g); Var text = <div></div> For (let i = 0; i < ArrayString.length; i++) { text.append(<li>ArrayString[i]</li>) } return ( <div className="App"> <textarea onChange={onChange} /> <br /> <br /> <button onClick={changeNewText}>change text</button> <br /> {text} </div> ); }