How to create new line in react table column with lots of data

Question

I am using react table. I am calling a method on API (.NET), which concatenates some fields and now I need to display this concatenated field in react table column.

From API I tried to put /n in the column so that it renders a new line on UI (inside react table). But no luck. Example: I need to display

This field is calculated by adding two numbers 10 and 20. Since the result is greater than 15 you cannot perform this operation.

In the displayed text, what I want is "Since" should start in a new line in react table.

I tried to put {'\n'} before "Since" but it did not work. Any ideas how to achieve this?

Answer 1

The '\n' escape character does not work in HTML. You have to work with other HTML solutions like using <br> or divs to get a multiline implementation working.

You solve this quite easily. when getting the string append a special char like the comma (,) or some other char that you are sure would not be used in your original text.

Then get that string to a js variable in your react app.

let multiLineString = "This field is calculated by adding two numbers 10 and 20. , Since the result is greater than 15 you cannot perform this operation";
let lines = multiLineString.split(',')
let linesHTML  = lines.map((line)=><div>{line}</div>);

now render this variable anywhere you want, you will get a multi line string implementation.

Of course the better approach would be to get a json array of values from the back end.