I am new to reactjs, I am trying to join which works, but I want to put a break after each Hello continent. The <br /> and \n do not work. The br tag works in regular js but not react. What I am looking for is

Hello Africa

Hello America

etc

What I am getting is Hello Africa Hello America ect

const continents = ['Africa','America','Asia','Australia','Europe'];
const helloContinents = Array.from(continents, c => `Hello ${c}!`);
const message = helloContinents.join("<br />");
const element = (
 <div title="Outer div">
  <h1>{message}</h1>
</div>
);

I am new to reactjs, I am trying to join which works, but I want to put a break after each Hello continent. The <br /> and \n do not work. The br tag works in regular js but not react. What I am looking for is

Hello Africa

Hello America

etc

What I am getting is Hello Africa Hello America ect

const continents = ['Africa','America','Asia','Australia','Europe'];
const helloContinents = Array.from(continents, c => `Hello ${c}!`);
const message = helloContinents.join("<br />");
const element = (
 <div title="Outer div">
  <h1>{message}</h1>
</div>
);

• javascript
• reactjs

4 Answers 4

You're trying to write HTML to the output, which by default is sanitized to help mitigate XSS vulnerabilities. You can use dangerouslySetInnerHTML to explicitly get around that:

const continents = ["Africa", "America", "Asia", "Australia", "Europe"];
const helloContinents = Array.from(continents, (c) => `Hello ${c}!`);
const message = helloContinents.join("<br />");
const element = (
  <div title="Outer div">
    <h1 dangerouslySetInnerHTML={{ __html: message }}></h1>
  </div>
);

Important: Check the documentation link above for warnings and caveats. Using this functionality without knowing exactly what you're doing could create security risks for your users.

Alternatively, for the data you're trying to display you don't need to build up an HTML string in the first place. You can iterate over the array values and output the structure you want:

const continents = ["Africa", "America", "Asia", "Australia", "Europe"];
const element = (
  <div title="Outer div">
    <h1>
    {
      continents.map((c, i) => (
        <React.Fragment key={i}>
          Hello ${c}<br/>
        </React.Fragment>
      ))
    }
    </h1>
  </div>
);

I tried your code and what you get is Hello Africa!<br />Hello America!<br />Hello Asia!<br />Hello Australia!<br />Hello Europe!

That because your code is producing a single <h1> element with the concatenated helloContinents messages, separated by <br />, but this <br /> tag will be treated as plain text and not render as a line break in React.

To address this issue I suggest you to ensure that the <br /> tags are treated as actual HTML elements.

Here an example:

const continents = ["Africa", "America", "Asia", "Australia", "Europe"];
  const helloContinents = continents.map((c, index) => (
    // creating all html elements to render
    <React.Fragment key={index}>
      Hello {c}!<br />
    </React.Fragment>
  ));

  return (
    <div title="Outer div">
      <h1>{helloContinents}</h1>
    </div>
  );

We can shorten and simplify your code with React.

export default function Continents() {
  const continents = ['Africa', 'America', 'Asia', 'Australia', 'Europe'];

  return (
    <div title="Outer div">
      {continents.map((continent, index) => (
        <h1 key={continent + '_' + index}>Hello {continent}!</h1>
      ))}
    </div>
  );
}

With React we can significantly reduce the number of lines of code, here we allowed React to handle the joining of strings with array values.

key is required for each element here as we are returning a list of html elements using Array.map() and needs an unique string as a value, it allows react to uniquely identify each element.

If your requirement is still for using <br/>, you can add the tag like {continent}<br/>.

React uses JSX - JavaScript Syntax Extension. It allows developers to write HTML-like code in JavaScript files.

This method lets us add line breaks to the text by using special codes called HTML entities <br />.

const continents = ['Africa','America','Asia','Australia','Europe'];
    const helloContinents = Array.from(continents, c => "Hello "+ c + "!");
    const message = helloContinents.join("<br />");
    const element = (
     <div title="Outer div">
      <h1>{message}</h1>
    </div>
    );