JSX extra white space when using Split Map

Question

How do I remove this white space? As you can see from my code, "Description" should be on its own line, and the text should go below it. This issue only occurs for some strings from the database , but AFAIK the strings from the database are all essentially the same - different messages but the same exact format.

Also, if I displayed only {this.state.info} inside the <Text> component, the layout is as expected. It only breaks with the split and map functions.

Expected outcome:

I am trying to split a text, this.state.info in JS React. The text contains "||" delimiter which indicates a new line break.

For example, "this||text" should really be:
"this
text"

Here is my code. It splits on '||'and puts each segment in paragraphs and then also replaces the string <p> in the text, if there are any, with empty strings.

            <Text fontStyle={TEXT_STYLE.BOLD}>Description</Text>
            <div
              className="textMinimumHeight"
              style={{minHeight: "111px"}}>
              <Text>
                {this.state.info.split('||').map((item, i) => {
                  return <p key={i}>{item.replace('<p>', '')}</p>;})
                }
              </Text>
            </div>

Thank you for helping!

Answer 1

You can try to do this:

1. <Text fontStyle={TEXT_STYLE.BOLD}>{`Description\n`}</Text>

2. <Text fontStyle={TEXT_STYLE.BOLD}>Description{`\n`}</Text>

or just put description inside <p> tag

3. <Text fontStyle={TEXT_STYLE.BOLD}><p>Description</p></Text>