Así que tengo una función para agregar un salto de línea cada 60 caracteres. Ahora lo que no entiendo es por qué \n no funciona.
function countStr (str1){ let str2=""; let charCount=0; for(let i=0; i<str.length; i++){ if(i%60===0){ str2=str2.concat(str1.substring(charCount,i)); str2+="\n"; charCount=i; } } return str2; } const About = () =>{ return( <div className="about"> <h2>I'm Gal</h2> <p>{changedStr} </p> </div> ); } export default About;Bucle sobre la cadena de entrada. Si la iteración actual es i % 20 (y tampoco cero), agregue un salto de línea. Agregue el carácter de la cadena de entrada.
En su componente que está representando la cadena, necesita agregar algo de CSS a ese elemento para que se imprima correctamente: white-space: pre-line .
function countStr(str) { let out = ''; for (let i = 0; i < str.length; i++) { if (i % 20 === 0 && i !== 0) out += '\n'; out += str[i]; } return out; } // Example string of 220 characters let str = ''; for (let i = 0; i < 220; i++) { str += '1'; } function Example({ str }) { return ( <div>{str}</div> ); }; ReactDOM.render( <Example str={countStr(str)} />, document.getElementById('react') ); div { white-space: pre-line; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>Usa esta sencilla función
function countStr(str) { let str2 = ''; while (str.length > 0) { str2 += str.substring(0, 60) + '\n'; str = str.substring(60); } return str2; }Si lo está usando en reaccionar y va a la web, es porque probablemente necesite un <br/> no un \n