How to use react-nl2br - 7 common examples

{items.map(item => (
      <div>
        <h3>{item.title}</h3>
        <p>{nl2br(item.text)}</p>
        
          <button>
            Detail
          </button>
        
      </div>
    ))}

<div>
                  {(tags || []).map((tag, i) =&gt; (
                    <span>{tag}</span>
                  ))}
                  <span title="{this.getEventsString(events)}">
                    {channel}
                  </span>
                </div>
              
            
            <div>
            <div>
              <a href="{`/notification/${id">
                <h3>{title}</h3>
                <p>{nl2br(text)}</p>
              </a>
            </div>
          
        ))}
      </div>

return 
  }

  if (data.error) {
    return 
  }

  return (
    
      
        {data.Post.title}
        
          <small>[edit]</small>
        
      
      <p>{nl2br(data.Post.text)}</p>
    
  )
}

content = collections.documents.map( (col) => {
                    return (
                        <div>
                            <div>
                                <div>
                                    <div><h2><a href="{`/playlist/${col._id}?sort=order`}">{col.title}</a></h2></div>
                                    <div>
                                        <div>{col.decks.length} {this.context.intl.formatMessage((col.decks.length === 1) ? this.messages.deckText : this.messages.decksText)} {(col.userGroup) ? '\u00b7' : ''} {(col.userGroup) ? <i title="{this.context.intl.formatMessage(this.messages.shareCollectionText)}"></i> : ''}</div>
                                        {nl2br(col.description)}
                                    </div>
                                </div>

                                <div>
                                    {(this.props.loggedinUserId === col.user) ? (
                                      <div>
                                          <button aria-label="{this.context.intl.formatMessage(this.messages.collectionDelete)}" data-tooltip="{this.context.intl.formatMessage(this.messages.collectionDelete)}">
                                              <i name="{'deleteCollection_'"></i>
                                          </button>
                                          <button name="{col._id}" aria-label="{this.context.intl.formatMessage(this.messages.collectionSettings)}" data-tooltip="{this.context.intl.formatMessage(this.messages.collectionSettings)}">
                                              <i name="{'editCollection'"></i>
                                          </button>
                                      </div>
                                    ) : ''}
                                </div>
                            </div></div>

{items.map(item => (
        
          
            <h3>{item.title}</h3>
            <p>{nl2br(item.text)}</p>
            
              <button> prefetchDetail(item.id)} bsStyle="primary"&gt;Detail</button>
            
          
        
      ))}

<button type="button">
                  
                  Cancel
                </button>
              
            )}
          

          <main>
            <div>
              <img alt="{meetup.title}" src="{meetup.banner.url}">
            </div>

            <div>
              <p>{nl2br(meetup.description)}</p>
              <footer>
                <div>
                  <p>
                    
                    {meetup.formattedDate}
                  </p>
                  <p>
                    
                    {meetup.location}
                  </p>
                </div>
                {meetup.subscriptions.length &gt;= 1 &amp;&amp; (
                  
                    <div>
                      {meetup.subscriptions.slice(0, 5).map((sub, index) =&gt; (
                        </div></footer></div></main>

onOk: async () => {
        try {
          await deletePage({ variables: { id: Number(data.pageDetail.id) } })
          history.push('/')
        } catch (error) {
          await message.error(error.message)
        }
      },
    })
  }

  return (
    <div data-testid="{PAGE_DETAIL_TEST_ID}">
      
        <h1>{data.pageDetail.title}</h1>
        <p>{nl2br(data.pageDetail.text)}</p>
      

      {userData?.me &amp;&amp; userData.me.id === data.pageDetail.user.id &amp;&amp; (
        
          
            <button type="primary" data-testid="{COMPONENT_EDIT_PAGE_TEST_ID}">
              edit page
            </button>
          
          <button type="danger" disabled="{isDeleting}" data-testid="{COMPONENT_DELETE_PAGE_TEST_ID}">
            {isDeleting ? 'deleting page...' : 'delete page'}</button></div>