React - How to return and string of HTML

Question

I guess I'm old fashioned and build strings of HTML and data. Was expecting React would handle this nicely when I return the string. Is there and obvious approach? And <br> doesn't seem to work any place. Is there a substitute?
(Below: Cut and paste into an .html file and it'll run.)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div id="root"></div>

<script type="text/babel">

var SportsPeople = [
  {thegame: 'Football', name: 'Tom Brady' },
  {thegame: 'Basketball',   name: 'Le Bron James' }
]

class Banner extends React.Component {
constructor(props) { super(props); };
render() {  return (  <div>Big Banner on the Top</div>);  }
}

class AnotherLine extends React.Component {
constructor(props) { super(props); };
render()   {  

let htmlStuff = "";
let workTable = this.props.stars;

for (let i = 0; i < workTable.length; i++)
{

    htmlStuff +=  workTable[i].thegame;
    htmlStuff +=   "<p> - </p>";
    htmlStuff +=  workTable[i].name;
    htmlStuff +=   "<br>";  
}


console.log ( { htmlStuff } );

return  (  <div> { htmlStuff }  </div> );  

}  // End render

} // End CLASS

//==============================

class Main extends React.Component {
constructor(props) { super(props);   };

render() {
    return (
      <div>
    <Banner  />
    <AnotherLine 
        stars = { SportsPeople } 
     />
      </div>);

  }
}

//  =========================================

ReactDOM.render(
  <Main />,
    document.getElementById('root')
);

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
</body>
</html>

"doesn't seem to work" - What does happen? Errors in the console, some other (incorrect) output on screen, or...? — nnnnnn
– nnnnnn, Commented Apr 7, 2017 at 2:51

Jas C. · Accepted Answer · 2017-04-07 03:04:04Z

4

Maybe try using the dangerouslySetInnerHtml prop inside your AnotherLine component like this:

    return (<div dangerouslySetInnerHTML={{__html:htmlStuff}}</div>)

See the docs here for better explanation: https://facebook.github.io/react/docs/dom-elements.html

edited Apr 7, 2017 at 3:04

answered Apr 7, 2017 at 2:59

Jas C.

1411 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Milton Valler Over a year ago

Hi Jas C; This worked return (<div dangerouslySetInnerHTML={{__html:htmlStuff}}></div>) Thanks. M.

Jas C. Over a year ago

Awesome! Glad I could help:)

Collectives™ on Stack Overflow

React - How to return and string of HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related