Break text on multiple lines inside JSX

Question

Having this component:

import React from "react";
import { Popup } from "semantic-ui-react";

const MyComponent = () => {
  const value = "TEST";
  return (
    <Popup
      content={`This is the data: ${value}`}
      on="click"
      pinned
      trigger={<div>{value}</div>}
    />
  );
}

export default MyComponent;

I want to show the content data on multiple lines but is seems to not work.

Tried so far:

content={`This{"\n"}is the data: ${value}`}
content={`This \n is the data: ${value}`}

Any ideas?

tried like content={`This
is the data: ${value}`}. still not working — Leo Messi, Jun 23 '20 at 18:29
You can directly pass jsx instead of string in that way you can modify your statement — Shubham Verma, Jun 23 '20 at 18:29

Shahzada Fahad Ashraf · Answer 1 · 2020-06-23T18:33:59.867

-1

Seems like this is an old issue.

Answered here: https://github.com/Semantic-Org/Semantic-UI/issues/5575

Solved using html instead of content and <br /> as separator.

edited Jun 23 '20 at 18:33

answered Jun 23 '20 at 18:24

Shahzada Fahad Ashraf

22
4

Break text on multiple lines inside JSX

1 Answers1