Estoy tratando de usar este gancho:
useEffect(() => { var arrText = txt.split('*'); arrText.map((line, index) => setTimeout(() => { setTexto((prev) => { return (prev += line + '\n'); }); }, 300 * index), ); }, []); Y simplemente rechaza mi \n y si trato de devolver JSX (la línea en un párrafo), se convierte en un [object object]
¿Podrías ayudarme? <3
El problema es que, a menos que intente mostrar una nueva línea en una etiqueta pre , se ignorará en el navegador. Sin embargo, podría almacenar el contenido de texto en el estado en una matriz, actualizarlo usando setTimeout y representar este estado. Puede usar etiquetas <p> o etiquetas <br> para mostrar el texto en líneas nuevas.
Además, no debe usar map() ya que crea una nueva matriz. En su lugar, podría usar forEach() o un bucle for simple.
let txt = 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur sapiente incidunt molestias beatae voluptas fuga repellendus sit nihil voluptate laudantium delectus aliquam, nulla non suscipit a ea natus voluptatem distinctio!'; function App() { let [texto, setTexto] = React.useState([]); React.useEffect(() => { txt.split(' ').forEach((line, index) => setTimeout(() => { setTexto((prev) => { return [...prev, line]; }); }, 300 * index) ); }, []); return ( <div> {texto.map((word, i) => ( <p key={i}>{word}</p> ))} </div> ); } ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); <div id="root"></div> <script src="https://unpkg.com/react/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script> No debe almacenar etiquetas HTML en su estado, ya que necesitará usar dangerouslySetInnerHTML .