react bootstrap acoordion cannot use pre tag or css white space for new line

user_15529116 0
Viewed 51

So I'm trying to create a accordion for my web app and it have accordion from bootstrap in it.

I wanted my app to be able to create new line depending on the product description entered from the database so if the admin set the desc to enter new line, the accordion should also enter and show newline. I tried using pre tag and also css white-space: pre-wrap but nothing work with it. Can anyone help me to fix this ?

my code:

<Container fluid>
  <Row>
    <Col lg={12} xs={12} className=" fontRegular">
      <Accordion defaultActiveKey="0" >
        <Accordion.Item eventKey="0">
            <Accordion.Header className="fontMedium">Deskripsi Produk</Accordion.Header>
            <Accordion.Body className="fontRegular">
              <pre >
                {product.description}
                hello
                hi
              </pre>
            </Accordion.Body>
        </Accordion.Item>
      </Accordion>
    </Col>
  </Row>
</Container>
react-bootstrap reactjs css
1 Answers

Usually, when you break line with "enter" in some tool, line break signs are inserted. This is for example how it looks like in Notepad++:

enter image description here

In your code editor line break signs are not automatically inserted, but if you manually do, you will see, that new lines are rendered accordingly:

const product = { description: "This is a \r\n Test" };

enter image description here

https://codesandbox.io/s/practical-grass-jz8syz

I don't know how your CMS or admin panel looks like, but usually you don't have to worry about your line breaks - this is handled automatically.

user_59804130
Related