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.",

]
Improve this question
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 <br />. Commented Apr 28, 2022 at 14:59
  • i'm rendering like this <p className="mt-3 md:mt-6 text-secondary-gray"> {product.desc} </p> Commented Apr 28, 2022 at 15:01
  • Try desc = (TEXT BEFORE LINE BREAK <br /> TEXT AFTER LINE BREAK); This creates a JSX tag and supports normal JSX line breaks and so forth. Commented Apr 28, 2022 at 15:04
  • @BlakeOttinger that would probably output the text <br />, not a br element Commented Apr 28, 2022 at 15:06
  • 1
    Please check if Inserting html inside string variable used in React component, and/or this answer is of any help. Commented Apr 28, 2022 at 15:29
Related questions
0
React output JSON on new line
1
Array map into string with line break - React
2
Add a line break javascript
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.