Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How can I insert a line break into a String component in React JS?

Hi for some reason this isn’t working

let ifAID = "Banco: Global Bank\nTipo de Cuenta: Corriente"

where \n should be a line break this is what is showing off, any advice ?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

enter image description here

I’m using Card, CardContent, Typography and Stack all inside a Box that is inside a Container (There’s a lot going on)

enter image description here

<Box pl={50} mb={2} sx={{width: "480px", justifyContent: 'center'}}>
      
      <Stack>
      <Card >
      <CardContent >
        <Typography variant = "h5"  gutterBottom>
        Transferencia Bancaria (ACH)
        </Typography>
        <Typography variant="h6">
        {ifAID}
        </Typography>
        <Typography>
        *Presentar comprobante de pago para retirar libros*
        </Typography></CardContent></Card></Stack></Box>

>Solution :

a h6 doesn’t handle line break. You may want to use a <pre> tag.

In your case it will become

    <Typography variant="h6" component="pre">
        {ifAID}
    </Typography>

More on pre tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading