rendering an array of strings and add between each element a new line - ReactJS

Question

What I'm trying to do is in the return of a render method, to add a newline between each element of an array (of strings).

I've tried two ways (one of them is commented):

import React, { Component } from 'react'

export default class extends Component {
  render() {
    return (
      <div>
        <div>
            <div className='Dog'>
                {this.props.name}
                <p>Age: {this.props.age}</p>
                {/* <text>About: {this.props.fact.map((f) => f+'\n')}</text> */}
                <p>{this.props.fact.join('\n')}</p>
            </div>
        </div>
      </div>
    )
  }
}

The result is not what I was looking for:

image #1 - result without any of my attempts (as if - just rendering {this.props.fact}:

image #2 - with my attempt (both attempts end up with same result):

AAAAAAAAAAAH, I'm clueless!

Thanks in advance.

romellem · Accepted Answer · 2022-09-28 14:47:40Z

2

Since whitespace is largely ignored, outputting a newline (\n) won't actually insert a line break. Instead, just use the line break tag (<br>).

In JSX, that looks like <br />. Since you need to return a single element, you'll also want wrap your text and line break in a fragment (<>...</>):

<text>
    About:{" "}
    {this.props.fact.map((f) => (
        <>
            {f}
            <br />
        </>
    ))}
</text>

edited Sep 28, 2022 at 14:47

answered Sep 28, 2022 at 14:37

romellem

6,5233 gold badges37 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

k.tten Over a year ago

Or you could flatMap into [f, <br />] if you're fancy :3

dani_l_n Over a year ago

@caTS me likey likey. p.s, answer worked like a charm. thanks!

tokland Over a year ago

Typically you don't want the trailing <br />, though.

hgb123 · Accepted Answer · 2022-09-28 14:40:50Z

0

If it's just text, you could use dangerouslySetInnerHTML

<p dangerouslySetInnerHTML={{ __html: this.props.fact.join('\n') }} />

answered Sep 28, 2022 at 14:40

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

Collectives™ on Stack Overflow

rendering an array of strings and add between each element a new line - ReactJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related