1

Hi i have a js file which is exporting data to my components how do i make some of the text bold and force a line break? I've tried \n but that doesn't work. I've annotated where i want the line break and where i want the text to be bold.

export const productData = [
    ...
        desc: "{bold} Heavy on features.Light on price. {line break here} Stay connected. Even without your phone. With powerful features to help keep you connected, active, healthy and safe, Apple Watch SE is a lot of watch for less.",

]
Imad
  • 93
  • 7
  • 3
    If you are wanting to render to the screen, you'll need to use a JSX object rather than a string and use
    .     – Blake Ottinger Apr 28 '22 at 14:59
  • i'm rendering like this ```

    {product.desc}

    ```     – Imad Apr 28 '22 at 15:01
  • Try `desc = (TEXT BEFORE LINE BREAK
    TEXT AFTER LINE BREAK);` This creates a JSX tag and supports normal JSX line breaks and so forth.     – Blake Ottinger Apr 28 '22 at 15:04
  • @BlakeOttinger that would probably output the text `
    `, not a br element     – evolutionxbox Apr 28 '22 at 15:06
  • Does this answer your question? [How to add a
    tag in reactjs between two strings?](https://stackoverflow.com/questions/45935733/how-to-add-a-br-tag-in-reactjs-between-two-strings)     – evolutionxbox Apr 28 '22 at 15:07
  • yeah
    just outputs it as text     – Imad Apr 28 '22 at 15:09
  • 1
    Please check if [Inserting html inside string variable used in React component](https://stackoverflow.com/questions/48084149/inserting-html-inside-string-variable-used-in-react-component), and/or [this answer](https://stackoverflow.com/a/57160503/13658816) is of any help. – jsN00b Apr 28 '22 at 15:29

0 Answers0