I save more strings inside an array. What I want to do is to show them when hover over an icon each of them on separate lines. What I tried so far:

addMessages = () => {
   const text = [];

   //add strings in the array

   return text.join("<hr/>");

}

render() {
   const showWhenHover = this.addMessages();

   return (
            <ActionBar popover={<div> {showWhenHover}</div>}
               <div>
                   <Icon type="myIcon"/>
               </div>
           </ActionBar>
          );
      }
}

When I hover over the icon it shows the messages but not each of them on a separate line but all in one line like this:

text1</hr>text2</hr>text3

Isn't <hr/> what must be used in this case? Thanks

I save more strings inside an array. What I want to do is to show them when hover over an icon each of them on separate lines. What I tried so far:

addMessages = () => {
   const text = [];

   //add strings in the array

   return text.join("<hr/>");

}

render() {
   const showWhenHover = this.addMessages();

   return (
            <ActionBar popover={<div> {showWhenHover}</div>}
               <div>
                   <Icon type="myIcon"/>
               </div>
           </ActionBar>
          );
      }
}

When I hover over the icon it shows the messages but not each of them on a separate line but all in one line like this:

text1</hr>text2</hr>text3

Isn't <hr/> what must be used in this case? Thanks

• javascript
• html
• reactjs

• 1 Sounds like you're looking for <br> – user5734311 Commented Jun 20, 2017 at 9:30
• I tried also with that but what I think is that it doesn't recognise the tag, it takes it like plain text – Samurai Jack Commented Jun 20, 2017 at 9:31
• showWhenHover all returns a text node. If you will have it render as markup you want to return a React.Component instance. – Oluwafemi Sule Commented Jun 20, 2017 at 9:32
• return (<div>{text.map((txt, i) => <div key={i}>{txt}<br></div> )}</div>); in addMessages – Oluwafemi Sule Commented Jun 20, 2017 at 9:35

3 Answers 3

Your function addMessage generates strings and not a html markup.

One solution is to use template literals allow multiline strings. The other thing is that make sure that the text are contained within an element that has defined dimensions, or dimensions big enough that the text can go to the next line.

const genText = () => `
  Text with lots of
  spaces within 
  it blah blah blah
  blah
`

const Comp = () => <div style={{width: 100, height: 200}}>{genText()}</div>

ReactDOM.render(<Comp />, document.getElementById('app'))

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

text.join will render a single string, including <hr /> in this case. In order to render JSX instead, try:

addMessages = () => {
  const text = [];

  // add strings in the array

  return text.map((item, index) => (
    <span key={index}>
      {item}
      {index && <hr />}
    </span>
  ));
}

Only downside here is the extra span, but I would prefer this over using dangerouslySetInnerHTML.

You can also use return text.map(e => <div>{e}</div>); to get each string in its own line.

function addMessages() {
   const text = [];
   
   text.push("1st line");
   text.push("2nd line");
   text.push("Third line");
   text.push("And a final one");

   return text.map(e => <div>{e}</div>);
}


const App = () => <div>{addMessages()}</div>

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

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