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?

Answer 1

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.