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

Question

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 ?

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

<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>

Answer 1

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