How to avoid breaking lines in React fragments

user_2433401 0
Viewed 69

I have the following function which generate a fragment:

const f = (first, last) => {
    <>{first}{first.indexOf("\'") > 0 ? "" : " "}<i>{last}</i></>
}

Then, I use the function in a piece of HTML

<Row>
   here is {f("xxx","yyy")}.
</Row>

I expected exactly the following output:

<div>
   here is xxx yyy.
</div>

but the result in the browser debug is the following:

<div> (flex)
"here is "
"xxx"
<i>yyy</i>
"."
</div>

and the browser displays as:

here is
xxx
yyy (<- this in italic)
.

I tried to wrap in a <span className="nowrap"> with

span .nowrap {
    white-space: nowrap;
  }

with no success.

Can someone provide some help?

reactjs javascript
1 Answers

The inspector is just showing you the text nodes. You can join up some of these nodes but there's an element node right in between the period and the first part of your text. There's no way around that.

{first}{first.indexOf("\'") > 0 ? "" : " "}

can be written as:

{`${first}${first.indexOf("\'") > 0 ? "" : " "}`}

But like I said, the last . will be a text node after the <i> element.

That being said, the browser (as in the document viewport) should display these text nodes without the line break.

user_15495410
Related