skip to Main Content

How to add br tag in this situation?

import './App.css';

export default function App() {
  return (
    <main>
      {`aaaa <br />bbbb`}
    </main>
  );
}

2

Answers


  1. Don’t use a literal string.

    <main>
      aaaa <br/>bbbb
    </main>
    

    If you must use a HTML string, you can use dangerouslySetInnerHTML, but know that this is generally not recommended.

    <main dangerouslySetInnerHTML={{__html: 'aaaa <br />bbbb'}}/>
    
    Login or Signup to reply.
  2. Options 1: dangerouslySetInnerHTML

    For general use cases, dangerouslySetInnerHTML should be fine. Beware that setting HTML from public text/strings is a major risk due to XSS attack.

    <div dangerouslySetInnerHTML={{__html: 'aaaa <br />bbbb'}} />
    

    Options 2: html-react-parser

    You may also try this library in place of dangerouslySetInnerHTML. You may do something like this –

    import parse from "html-react-parser";
    parse("<main>aaaa <br />bbbb</main>")
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search