How to display an array of strings in react component

Question

I'm trying to display an array of strings on separate lines in my react component by doing the following:

       <div>
          {this.props.notifications.join('\n')}
      </div>

However, this doesn't seem to be working. this.props.notifications is an array of strings that I want to render in the div. Does anyone know how I can work around this?

What do you mean by "this doesn't seem to be working"? It works in some way. What way do you want it to work? — Aaron Beall
– Aaron Beall, Commented Jan 11, 2018 at 21:32
@Aaron I want each string to be on a separate line. I tried using .join('\n') but that doesn't seem to do the trick. I updated my question. — blazerix
– blazerix, Commented Jan 11, 2018 at 21:36

Crysfel · Accepted Answer · 2018-01-11 21:46:06Z

14

What about using a <p /> to render each line?

<div>
   {this.props.notifications.map(txt => <p>{txt}</p>)}
</div>

That will render each element in a different paragraph.

answered Jan 11, 2018 at 21:46

Crysfel

8,1883 gold badges35 silver badges41 bronze badges

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

Comments

Aaron Beall · Accepted Answer · 2018-01-11 21:46:53Z

4

I want each string to be on a separate line.

Use Array/map() in your render:

<div>
  { this.props.notifications.map(notification => <p>{ notification }</p>) }
</div>

answered Jan 11, 2018 at 21:46

Aaron Beall

52.6k26 gold badges91 silver badges109 bronze badges

1 Comment

Elliptica Over a year ago

I've tried that, but it only words if I'm mapping over an array of numbers. If I use an array of strings, it puts them all together side-by-side, even though the individual <p></p> is clearly defined

Sagiv b.g · Accepted Answer · 2018-01-11 21:43:16Z

You can use string literals or \n.
But you will need to combine it with the css rule:

white-space: pre-line;

Here is a running example with string literals:

const arr = ['this is line #1', 'this is line #2', 'this is line #3']
const App = () => (
  <div className="line-break">
    {
      arr.map(str => {
        return(`
          ${str}
        `)
      })
    }
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

.line-break {
  white-space: pre-line;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Here is a running example with \n:

const arr = ['this is line #1', 'this is line #2', 'this is line #3']
const App = () => (
  <div className="line-break">
    {
      arr.join('\n')
    }
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

.line-break {
  white-space: pre-line;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Collectives™ on Stack Overflow

How to display an array of strings in react component

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related